ரியாக்ட் createRef: நேரடி காம்பொனென்ட் மற்றும் DOM உறுப்பு ஊடாட்டங்களுக்கான ஒரு முழுமையான வழிகாட்டி

நவீன வலை உருவாக்கத்தின் பரந்த மற்றும் சிக்கலான நிலப்பரப்பில், ரியாக்ட் ஒரு ஆதிக்க சக்தியாக உருவெடுத்துள்ளது, முதன்மையாக பயனர் இடைமுகப்புகளை உருவாக்குவதற்கான அதன் அறிவிப்பு அணுகுமுறைக்காக கொண்டாடப்படுகிறது. இந்த முன்னுதாரணம், நேரடி DOM கையாளுதல்கள் மூலம் அந்த காட்சி நிலையை எப்படி அடைவது என்பதை பரிந்துரைப்பதை விட, தரவின் அடிப்படையில் தங்கள் UI என்ன போல் இருக்க வேண்டும் என்பதை விவரிக்க டெவலப்பர்களை ஊக்குவிக்கிறது. இந்த சுருக்கம் UI உருவாக்கத்தை கணிசமாக எளிதாக்கியுள்ளது, பயன்பாடுகளை மேலும் கணிக்கக்கூடியதாகவும், புரிந்துகொள்ள எளிதாகவும், மற்றும் உயர் செயல்திறன் கொண்டதாகவும் ஆக்குகிறது.

இருப்பினும், வலைப் பயன்பாடுகளின் நிஜ உலகம் அரிதாகவே முழுமையாக அறிவிப்பு முறையில் உள்ளது. சில குறிப்பிட்ட, ஆனால் பொதுவான சூழ்நிலைகளில், அடிப்படை DOM (Document Object Model) உறுப்பு அல்லது ஒரு கிளாஸ் காம்பொனென்ட் நிகழ்வுடன் நேரடி தொடர்பு கொள்வது வசதியானது மட்டுமல்ல, முற்றிலும் அவசியமானதாகவும் ஆகிறது. ரியாக்ட்டின் அறிவிப்பு ஓட்டத்திலிருந்து இந்த "தப்பிக்கும் வழிகள்" refs என்று அழைக்கப்படுகின்றன. இந்த ரெஃபரன்ஸ்களை உருவாக்குவதற்கும் நிர்வகிப்பதற்கும் ரியாக்ட் வழங்கும் பல்வேறு வழிமுறைகளில், React.createRef() ஒரு அடிப்படை API ஆக நிற்கிறது, குறிப்பாக கிளாஸ் காம்பொனென்ட்களுடன் பணிபுரியும் டெவலப்பர்களுக்கு இது மிகவும் பொருத்தமானது.

இந்த விரிவான வழிகாட்டி React.createRef()-ஐப் புரிந்துகொள்வதற்கும், செயல்படுத்துவதற்கும், மற்றும் தேர்ச்சி பெறுவதற்கும் உங்களின் உறுதியான ஆதாரமாக இருப்பதை நோக்கமாகக் கொண்டுள்ளது. நாம் அதன் நோக்கத்தைப் பற்றிய ஒரு விரிவான ஆய்வில் ஈடுபடுவோம், அதன் தொடரியல் மற்றும் நடைமுறைப் பயன்பாடுகளில் ஆழ்ந்து செல்வோம், அதன் சிறந்த நடைமுறைகளை விளக்குவோம், மற்றும் பிற ref மேலாண்மை உத்திகளிலிருந்து அதை வேறுபடுத்துவோம். நீங்கள் ஒரு அனுபவமிக்க ரியாக்ட் டெவலப்பராக இருந்து, உங்கள் கட்டாய ஊடாட்டங்களைப் பற்றிய புரிதலை உறுதிப்படுத்த விரும்பினாலும் அல்லது இந்த முக்கியமான கருத்தைப் புரிந்துகொள்ள விரும்பும் ஒரு புதியவராக இருந்தாலும், இந்த கட்டுரை நவீன பயனர் அனுபவங்களின் சிக்கலான கோரிக்கைகளை நேர்த்தியாகக் கையாளும் மிகவும் வலுவான, செயல்திறன் மிக்க, மற்றும் உலகளவில் அணுகக்கூடிய ரியாக்ட் பயன்பாடுகளை உருவாக்கத் தேவையான அறிவை உங்களுக்கு வழங்கும்.

ரியாக்ட்டில் Refs-ஐப் புரிந்துகொள்ளுதல்: அறிவிப்பு மற்றும் கட்டளை உலகங்களை இணைத்தல்

அதன் மையத்தில், ரியாக்ட் ஒரு அறிவிப்பு நிரலாக்க பாணியை ஆதரிக்கிறது. நீங்கள் உங்கள் காம்பொனென்ட்கள், அவற்றின் ஸ்டேட், மற்றும் அவை எவ்வாறு ரெண்டர் செய்யப்படுகின்றன என்பதை வரையறுக்கிறீர்கள். பின்னர் ரியாக்ட் பொறுப்பேற்று, உங்கள் அறிவிக்கப்பட்ட UI-ஐப் பிரதிபலிக்கும் வகையில் உண்மையான பிரவுசர் DOM-ஐ திறமையாகப் புதுப்பிக்கிறது. இந்த சுருக்க அடுக்கு மிகவும் சக்தி வாய்ந்தது, டெவலப்பர்களை நேரடி DOM கையாளுதலின் சிக்கல்கள் மற்றும் செயல்திறன் குறைபாடுகளிலிருந்து பாதுகாக்கிறது. இதனால்தான் ரியாக்ட் பயன்பாடுகள் பெரும்பாலும் மிகவும் மென்மையாகவும் பதிலளிக்கக்கூடியதாகவும் உணர்கின்றன.

ஒருதிசை தரவு ஓட்டம் மற்றும் அதன் வரம்புகள்

ரியாக்ட்டின் கட்டமைப்பு வலிமை அதன் ஒருதிசை தரவு ஓட்டத்தில் உள்ளது. தரவு பெற்றோர் காம்பொனென்ட்களிலிருந்து குழந்தைகளுக்கு ப்ராப்ஸ் வழியாக கணிக்கக்கூடிய வகையில் கீழே பாய்கிறது, மற்றும் ஒரு காம்பொனென்ட்டிற்குள் ஸ்டேட் மாற்றங்கள் அதன் துணை மரம் முழுவதும் பரவும் மறு-ரெண்டர்களைத் தூண்டுகின்றன. இந்த மாதிரி கணிக்கக்கூடிய தன்மையை வளர்க்கிறது மற்றும் பிழைத்திருத்தத்தை கணிசமாக எளிதாக்குகிறது, ஏனெனில் தரவு எங்கிருந்து உருவாகிறது மற்றும் அது UI-ஐ எவ்வாறு பாதிக்கிறது என்பதை நீங்கள் எப்போதும் அறிவீர்கள். இருப்பினும், ஒவ்வொரு ஊடாட்டமும் இந்த மேலிருந்து கீழ் தரவு ஓட்டத்துடன் சரியாகப் பொருந்தாது.

போன்ற சூழ்நிலைகளைக் கவனியுங்கள்:

• ஒரு பயனர் ஒரு படிவத்திற்குச் செல்லும்போது ஒரு உள்ளீட்டு புலத்தில் நிரலாக்க முறையில் ஃபோகஸ் செய்தல்.
• ஒரு <video> உறுப்பில் play() அல்லது pause() முறைகளைத் தூண்டுதல்.
• தளவமைப்பை மாறும் வகையில் சரிசெய்ய ஒரு ரெண்டர் செய்யப்பட்ட <div>-இன் சரியான பிக்சல் பரிமாணங்களை அளவிடுதல்.
• ஒரு DOM கொள்கலனுக்கு நேரடி அணுகலை எதிர்பார்க்கும் ஒரு சிக்கலான மூன்றாம் தரப்பு ஜாவாஸ்கிரிப்ட் நூலகத்தை (எ.கா., D3.js போன்ற ஒரு விளக்கப்பட நூலகம் அல்லது ஒரு வரைபட காட்சிப்படுத்தல் கருவி) ஒருங்கிணைத்தல்.

இந்த செயல்கள் இயல்பாகவே கட்டளை முறை சார்ந்தவை – அவை ஒரு உறுப்புக்கு அதன் விரும்பிய நிலையை அறிவிப்பதற்குப் பதிலாக, ஏதாவது செய்ய நேரடியாகக் கட்டளையிடுவதை உள்ளடக்கியது. ரியாக்ட்டின் அறிவிப்பு மாதிரி பல கட்டளை விவரங்களை சுருக்க முடியும் என்றாலும், அது அவற்றின் தேவையை முழுமையாக நீக்காது. இதுவே refs செயல்படும் இடம், இந்த நேரடி ஊடாட்டங்களைச் செய்ய ஒரு கட்டுப்படுத்தப்பட்ட தப்பிக்கும் வழியை வழங்குகிறது.

Refs எப்போது பயன்படுத்த வேண்டும்: கட்டளை மற்றும் அறிவிப்பு ஊடாட்டங்களை வழிநடத்துதல்

refs உடன் பணிபுரியும் போது மிக முக்கியமான கொள்கை, அவற்றை குறைவாகவும், முற்றிலும் தேவைப்படும்போது மட்டுமே பயன்படுத்த வேண்டும். ஒரு பணியை ரியாக்ட்டின் நிலையான அறிவிப்பு வழிமுறைகளைப் (ஸ்டேட் மற்றும் ப்ராப்ஸ்) பயன்படுத்தி நிறைவேற்ற முடிந்தால், அதுவே எப்போதும் உங்கள் விருப்பமான அணுகுமுறையாக இருக்க வேண்டும். refs-ஐ அதிகமாகச் சார்ந்திருப்பது, புரிந்துகொள்ள, பராமரிக்க மற்றும் பிழைத்திருத்தம் செய்ய கடினமான குறியீட்டிற்கு வழிவகுக்கும், ரியாக்ட் வழங்கும் நன்மைகளையே குறைமதிப்பிற்கு உட்படுத்தும்.

இருப்பினும், ஒரு DOM நோட் அல்லது ஒரு காம்பொனென்ட் நிகழ்வுக்கு நேரடி அணுகல் தேவைப்படும் சூழ்நிலைகளுக்கு, refs சரியான மற்றும் நோக்கம் கொண்ட தீர்வாகும். பொருத்தமான பயன்பாட்டு நிகழ்வுகளின் விரிவான முறிவு இங்கே:

• ஃபோகஸ், டெக்ஸ்ட் தேர்வு, மற்றும் மீடியா பிளேபேக்கை நிர்வகித்தல்: இவை நீங்கள் உறுப்புகளுடன் கட்டாயமாக ஊடாட வேண்டிய கிளாசிக் எடுத்துக்காட்டுகள். பக்கம் ஏற்றப்படும்போது ஒரு தேடல் பட்டியில் தானாக ஃபோகஸ் செய்தல், ஒரு உள்ளீட்டு புலத்தில் உள்ள அனைத்து டெக்ஸ்டையும் தேர்ந்தெடுத்தல், அல்லது ஒரு ஆடியோ அல்லது வீடியோ பிளேயரின் பிளேபேக்கைக் கட்டுப்படுத்துதல் பற்றி சிந்தியுங்கள். இந்த செயல்கள் பொதுவாக பயனர் நிகழ்வுகள் அல்லது காம்பொனென்ட் வாழ்க்கைச் சுழற்சி முறைகளால் தூண்டப்படுகின்றன, வெறுமனே ப்ராப்ஸ் அல்லது ஸ்டேட்டை மாற்றுவதன் மூலம் அல்ல.
• கட்டாய அனிமேஷன்களைத் தூண்டுதல்: பல அனிமேஷன்களை CSS மாற்றங்கள்/அனிமேஷன்கள் அல்லது ரியாக்ட் அனிமேஷன் நூலகங்களுடன் அறிவிப்பு முறையில் கையாள முடியும் என்றாலும், சில சிக்கலான, உயர்-செயல்திறன் அனிமேஷன்கள், குறிப்பாக HTML கேன்வாஸ் API, WebGL, அல்லது ரியாக்ட்டின் ரெண்டர் சுழற்சிக்கு வெளியே சிறப்பாக நிர்வகிக்கப்படும் உறுப்பு பண்புகளின் மீது நுணுக்கமான கட்டுப்பாடு தேவைப்படும் அனிமேஷன்களுக்கு refs தேவைப்படலாம்.
• மூன்றாம் தரப்பு DOM நூலகங்களுடன் ஒருங்கிணைத்தல்: பல பழமையான ஜாவாஸ்கிரிப்ட் நூலகங்கள் (எ.கா., D3.js, வரைபடங்களுக்கு Leaflet, பல்வேறு மரபு UI கருவிகள்) குறிப்பிட்ட DOM உறுப்புகளை நேரடியாகக் கையாள வடிவமைக்கப்பட்டுள்ளன. Refs அத்தியாவசிய பாலத்தை வழங்குகின்றன, ரியாக்ட் ஒரு கொள்கலன் உறுப்பை ரெண்டர் செய்ய அனுமதிக்கிறது, பின்னர் மூன்றாம் தரப்பு நூலகத்திற்கு அதன் சொந்த கட்டாய ரெண்டரிங் தர்க்கத்திற்காக அந்த கொள்கலனுக்கான அணுகலை வழங்குகிறது.
• உறுப்பு பரிமாணங்கள் அல்லது நிலையை அளவிடுதல்: மேம்பட்ட தளவமைப்புகள், மெய்நிகராக்கம், அல்லது தனிப்பயன் ஸ்க்ரோல் நடத்தைகளைச் செயல்படுத்த, உங்களுக்கு ஒரு உறுப்பின் அளவு, வியூபோர்ட்டைப் பொறுத்து அதன் நிலை, அல்லது அதன் ஸ்க்ரோல் உயரம் பற்றிய துல்லியமான தகவல்கள் தேவை. getBoundingClientRect() போன்ற API-கள் உண்மையான DOM நோட்களில் மட்டுமே அணுகக்கூடியவை, அத்தகைய கணக்கீடுகளுக்கு refs-ஐ இன்றியமையாததாக ஆக்குகிறது.

மாறாக, அறிவிப்பு முறையில் அடையக்கூடிய பணிகளுக்கு refs-ஐப் பயன்படுத்துவதைத் தவிர்க்க வேண்டும். இதில் அடங்குவன:

• ஒரு காம்பொனென்ட்டின் ஸ்டைலை மாற்றுதல் (நிபந்தனைக்குட்பட்ட ஸ்டைலிங்கிற்கு ஸ்டேட்டைப் பயன்படுத்தவும்).
• ஒரு உறுப்பின் டெக்ஸ்ட் உள்ளடக்கத்தை மாற்றுதல் (ஒரு ப்ராப்பாக அனுப்பவும் அல்லது ஸ்டேட்டைப் புதுப்பிக்கவும்).
• சிக்கலான காம்பொனென்ட் தொடர்பு (ப்ராப்ஸ் மற்றும் கால்பேக்குகள் பொதுவாக சிறந்தவை).
• ஸ்டேட் நிர்வாகத்தின் செயல்பாட்டைப் பிரதிபலிக்க முயற்சிக்கும் எந்தவொரு சூழ்நிலையும்.

React.createRef()-க்குள் நுழைதல்: கிளாஸ் காம்பொனென்ட்களுக்கான நவீன அணுகுமுறை

React.createRef() ரியாக்ட் 16.3-ல் அறிமுகப்படுத்தப்பட்டது, இது பழைய முறைகளான ஸ்ட்ரிங் refs (இப்போது நீக்கப்பட்டது) மற்றும் கால்பேக் refs (இன்னும் செல்லுபடியாகும் ஆனால் பெரும்பாலும் அதிக சொற்களைக் கொண்டது) ஒப்பிடும்போது refs-ஐ நிர்வகிக்க ஒரு தெளிவான மற்றும் சுத்தமான வழியை வழங்குகிறது. இது கிளாஸ் காம்பொனென்ட்களுக்கான முதன்மை ref உருவாக்கும் வழிமுறையாக வடிவமைக்கப்பட்டுள்ளது, இது கிளாஸ் அமைப்புக்குள் இயல்பாகப் பொருந்தக்கூடிய ஒரு பொருள்-சார்ந்த API-ஐ வழங்குகிறது.

தொடரியல் மற்றும் அடிப்படை பயன்பாடு: ஒரு மூன்று-படி செயல்முறை

createRef()-ஐப் பயன்படுத்துவதற்கான பணிப்பாய்வு நேரடியானது மற்றும் மூன்று முக்கிய படிகளை உள்ளடக்கியது:

1. ஒரு Ref ஆப்ஜெக்ட்டை உருவாக்குங்கள்: உங்கள் கிளாஸ் காம்பொனென்ட்டின் கன்ஸ்ட்ரக்டரில், React.createRef()-ஐ அழைத்து அதன் திரும்பும் மதிப்பை ஒரு நிகழ்வு பண்பிற்கு (எ.கா., this.myRef) ஒதுக்குவதன் மூலம் ஒரு ref நிகழ்வைத் தொடங்கவும்.
2. Ref-ஐ இணைக்கவும்: உங்கள் காம்பொனென்ட்டின் render முறையில், உருவாக்கப்பட்ட ref ஆப்ஜெக்ட்டை நீங்கள் குறிப்பிட விரும்பும் ரியாக்ட் உறுப்பின் (ஒரு HTML உறுப்பு அல்லது ஒரு கிளாஸ் காம்பொனென்ட்) ref பண்பிற்கு அனுப்பவும்.
3. இலக்கை அணுகவும்: காம்பொனென்ட் மவுண்ட் செய்யப்பட்டவுடன், குறிப்பிடப்பட்ட DOM நோட் அல்லது காம்பொனென்ட் நிகழ்வு உங்கள் ref ஆப்ஜெக்ட்டின் .current பண்பு வழியாகக் கிடைக்கும் (எ.கா., this.myRef.current).

import React from 'react';

class FocusInputOnMount extends React.Component {
constructor(props) {
super(props);

this.inputElementRef = React.createRef(); // படி 1: கன்ஸ்ட்ரக்டரில் ஒரு ref ஆப்ஜெக்ட்டை உருவாக்குங்கள்
console.log('Constructor: Ref current மதிப்பு ஆரம்பத்தில்:', this.inputElementRef.current); // null
}

componentDidMount() {

if (this.inputElementRef.current) {
this.inputElementRef.current.focus();
console.log('ComponentDidMount: உள்ளீடு ஃபோகஸ் செய்யப்பட்டது. தற்போதைய மதிப்பு:', this.inputElementRef.current.value);
}
}

handleButtonClick = () => {

if (this.inputElementRef.current) {
alert(`உள்ளீட்டு மதிப்பு: ${this.inputElementRef.current.value}`);
}
};

render() {
console.log('Render: Ref current மதிப்பு:', this.inputElementRef.current); // ஆரம்ப ரெண்டரில் இன்னும் null
return (
<div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px' }}>
<h3>தானாக-ஃபோகஸ் செய்யும் உள்ளீட்டு புலம்</h3>
<label htmlFor="focusInput">உங்கள் பெயரை உள்ளிடவும்:</label><br />
<input
id="focusInput"
type="text"
ref={this.inputElementRef} // படி 2: <input> உறுப்புடன் ref-ஐ இணைக்கவும்
placeholder="உங்கள் பெயர் இங்கே..."
style={{ margin: '10px 0', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
/><br />
<button
onClick={this.handleButtonClick}
style={{ padding: '10px 15px', background: '#007bff', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
>
உள்ளீட்டு மதிப்பைக் காட்டு
</button>
<p><em>காம்பொனென்ட் ஏற்றப்படும்போது இந்த உள்ளீடு தானாகவே ஃபோகஸ் பெறும்.</em></p>
</div>
);
}
}

இந்த எடுத்துக்காட்டில், this.inputElementRef என்பது ரியாக்ட் உள்நாட்டில் நிர்வகிக்கும் ஒரு ஆப்ஜெக்ட் ஆகும். <input> உறுப்பு ரெண்டர் செய்யப்பட்டு DOM-ல் மவுண்ட் செய்யப்படும்போது, ரியாக்ட் அந்த உண்மையான DOM நோடை this.inputElementRef.current-க்கு ஒதுக்குகிறது. componentDidMount வாழ்க்கைச் சுழற்சி முறை refs உடன் ஊடாடுவதற்கு சிறந்த இடமாகும், ஏனெனில் இது காம்பொனென்ட் மற்றும் அதன் குழந்தைகள் DOM-ல் ரெண்டர் செய்யப்பட்டுள்ளதாகவும், .current பண்பு கிடைக்கப்பெற்று நிரப்பப்பட்டுள்ளதாகவும் உத்தரவாதம் அளிக்கிறது.

ஒரு DOM உறுப்புடன் Ref-ஐ இணைத்தல்: நேரடி DOM அணுகல்

ஒரு நிலையான HTML உறுப்புக்கு (எ.கா., <div>, <p>, <button>, <img>) ஒரு ref-ஐ இணைக்கும்போது, உங்கள் ref ஆப்ஜெக்ட்டின் .current பண்பு உண்மையான அடிப்படை DOM உறுப்பைக் கொண்டிருக்கும். இது உங்களுக்கு அனைத்து நிலையான பிரவுசர் DOM API-களுக்கான தடையற்ற அணுகலை வழங்குகிறது, ரியாக்ட்டின் அறிவிப்பு கட்டுப்பாட்டிற்கு வெளியே உள்ள செயல்களைச் செய்ய உங்களை அனுமதிக்கிறது. இது பல்வேறு பயனர் சூழல்கள் மற்றும் சாதன வகைகளில் துல்லியமான தளவமைப்பு, ஸ்க்ரோலிங், அல்லது ஃபோகஸ் மேலாண்மை முக்கியமானதாக இருக்கும் உலகளாவிய பயன்பாடுகளுக்கு குறிப்பாக பயனுள்ளதாக இருக்கும்.

import React from 'react';

class ScrollToElementExample extends React.Component {
constructor(props) {
super(props);
this.targetDivRef = React.createRef();
this.state = { showScrollButton: false };
}

componentDidMount() {
// ஸ்க்ரோல் செய்ய போதுமான உள்ளடக்கம் இருந்தால் மட்டுமே ஸ்க்ரோல் பட்டனைக் காட்டு
// இந்த சரிபார்ப்பு ref ஏற்கனவே தற்போதையதாக இருப்பதையும் உறுதி செய்கிறது.
if (this.targetDivRef.current && window.innerHeight < document.body.scrollHeight) {
this.setState({ showScrollButton: true });
}
}

handleScrollToTarget = () => {
if (this.targetDivRef.current) {
// மென்மையான ஸ்க்ரோலிங்கிற்காக scrollIntoView-ஐப் பயன்படுத்துதல், உலகளவில் பிரவுசர்களில் பரவலாக ஆதரிக்கப்படுகிறது.
this.targetDivRef.current.scrollIntoView({
behavior: 'smooth', // சிறந்த பயனர் அனுபவத்திற்காக ஸ்க்ரோலை அனிமேட் செய்கிறது
block: 'start' // உறுப்பின் மேல் பகுதியை வியூபோர்ட்டின் மேல் பகுதியுடன் சீரமைக்கிறது
});
console.log('இலக்கு div-க்கு ஸ்க்ரோல் செய்யப்பட்டது!');
} else {
console.warn('ஸ்க்ரோல் செய்வதற்கு இலக்கு div இன்னும் கிடைக்கவில்லை.');
}
};

render() {
return (
<div style={{ padding: '15px' }}>
<h2>Ref உடன் ஒரு குறிப்பிட்ட உறுப்புக்கு ஸ்க்ரோல் செய்தல்</h2>
<p>இந்த எடுத்துக்காட்டு, திரைக்கு வெளியே உள்ள ஒரு DOM உறுப்புக்கு நிரலாக்க முறையில் எவ்வாறு ஸ்க்ரோல் செய்வது என்பதை நிரூபிக்கிறது.</p>

{this.state.showScrollButton && (
<button
onClick={this.handleScrollToTarget}
style={{ marginBottom: '20px', padding: '10px 20px', background: '#28a745', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
>
இலக்கு பகுதிக்கு கீழே ஸ்க்ரோல் செய்யவும்
</button>
)}

<div style={{ height: '1500px', background: '#f8f9fa', padding: '20px', marginBottom: '20px', border: '1px dashed #6c757d' }}>
<p>செங்குத்து ஸ்க்ரோல் இடத்தை உருவாக்க ஒதுக்கிட உள்ளடக்கம்.</p>
<p>நீண்ட கட்டுரைகள், சிக்கலான படிவங்கள், அல்லது பயனர்கள் விரிவான உள்ளடக்கத்தை வழிநடத்த வேண்டிய விரிவான டாஷ்போர்டுகளை கற்பனை செய்து பாருங்கள். நிரலாக்க ஸ்க்ரோலிங் பயனர்கள் கைமுறை முயற்சி இல்லாமல் தொடர்புடைய பிரிவுகளை விரைவாக அடைய முடியும் என்பதை உறுதி செய்கிறது, இது அனைத்து சாதனங்கள் மற்றும் திரை அளவுகளில் அணுகல்தன்மை மற்றும் பயனர் ஓட்டத்தை மேம்படுத்துகிறது.</p>
<p>இந்த நுட்பம் பல-பக்க படிவங்கள், படி-படியான வழிகாட்டிகள், அல்லது ஆழமான வழிசெலுத்தல் கொண்ட ஒற்றை-பக்க பயன்பாடுகளில் குறிப்பாக பயனுள்ளதாக இருக்கும்.</p>
</div>

<div
ref={this.targetDivRef} // ref-ஐ இங்கே இணைக்கவும்
style={{ minHeight: '300px', background: '#e9ecef', padding: '30px', border: '2px solid #007bff', borderRadius: '10px', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}>
<h3>நீங்கள் இலக்கு பகுதியை அடைந்துவிட்டீர்கள்!</h3>
<p>இது நாம் நிரலாக்க முறையில் ஸ்க்ரோல் செய்த பகுதி.</p>
<p>ஸ்க்ரோலிங் நடத்தையை துல்லியமாக கட்டுப்படுத்தும் திறன் பயனர் அனுபவத்தை மேம்படுத்துவதில் முக்கியமானது, குறிப்பாக மொபைல் சாதனங்களில் திரை இடம் குறைவாகவும், துல்லியமான வழிசெலுத்தல் முதன்மையானதாகவும் இருக்கும்.</p>
</div>
</div>
);
}
}

இந்த எடுத்துக்காட்டு, createRef எவ்வாறு பிரவுசர்-நிலை ஊடாட்டங்களின் மீது கட்டுப்பாட்டை வழங்குகிறது என்பதை அழகாக விளக்குகிறது. அத்தகைய நிரலாக்க ஸ்க்ரோலிங் திறன்கள் பல பயன்பாடுகளில் முக்கியமானவை, நீண்ட ஆவணங்களை வழிநடத்துவது முதல் சிக்கலான பணிப்பாய்வுகள் மூலம் பயனர்களை வழிநடத்துவது வரை. scrollIntoView-ல் உள்ள behavior: 'smooth' விருப்பம் ஒரு இனிமையான, அனிமேஷன் செய்யப்பட்ட மாற்றத்தை உறுதி செய்கிறது, இது உலகளவில் பயனர் அனுபவத்தை மேம்படுத்துகிறது.

ஒரு கிளாஸ் காம்பொனென்ட்டுடன் Ref-ஐ இணைத்தல்: நிகழ்வுகளுடன் ஊடாடுதல்

சொந்த DOM உறுப்புகளுக்கு அப்பால், நீங்கள் ஒரு கிளாஸ் காம்பொனென்ட்டின் நிகழ்வுக்கும் ஒரு ref-ஐ இணைக்கலாம். நீங்கள் இதைச் செய்யும்போது, உங்கள் ref ஆப்ஜெக்ட்டின் .current பண்பு உண்மையான உருவாக்கப்பட்ட கிளாஸ் காம்பொனென்ட்டையே கொண்டிருக்கும். இது ஒரு பெற்றோர் காம்பொனென்ட் குழந்தை கிளாஸ் காம்பொனென்ட்டிற்குள் வரையறுக்கப்பட்ட முறைகளை நேரடியாக அழைக்க அல்லது அதன் நிகழ்வு பண்புகளை அணுக அனுமதிக்கிறது. சக்திவாய்ந்ததாக இருந்தாலும், இந்த திறனை மிகுந்த எச்சரிக்கையுடன் பயன்படுத்த வேண்டும், ஏனெனில் இது பாரம்பரிய ஒருதிசை தரவு ஓட்டத்தை உடைக்க அனுமதிக்கிறது, இது குறைவாக கணிக்கக்கூடிய பயன்பாட்டு நடத்தைக்கு வழிவகுக்கும்.

import React from 'react';

// குழந்தை கிளாஸ் காம்பொனென்ட்
class DialogBox extends React.Component {
constructor(props) {
super(props);
this.state = { isOpen: false, message: '' };
}

// ref வழியாக பெற்றோருக்கு வெளிப்படுத்தப்பட்ட முறை
open(message) {
this.setState({ isOpen: true, message });
}

close = () => {
this.setState({ isOpen: false, message: '' });
};

render() {
if (!this.state.isOpen) return null;

return (
<div style={{ position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', padding: '25px 35px', background: 'white', border: '1px solid #ddd', borderRadius: '8px', boxShadow: '0 5px 15px rgba(0,0,0,0.2)', zIndex: 1000, maxWidth: '400px', width: '90%', textAlign: 'center' }}>
<h4>பெற்றோரிடமிருந்து செய்தி</h4>
<p>{this.state.message}</p>
<button
onClick={this.close}
style={{ marginTop: '15px', padding: '8px 15px', background: '#dc3545', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
>
மூடு
</button>
</div>
);
}
}

// பெற்றோர் கிளாஸ் காம்பொனென்ட்
class AppWithDialog extends React.Component {
constructor(props) {
super(props);
this.dialogRef = React.createRef();
}

handleOpenDialog = () => {
if (this.dialogRef.current) {
// குழந்தை காம்பொனென்ட் நிகழ்வை அணுகி அதன் 'open' முறையை அழைக்கவும்
this.dialogRef.current.open('பெற்றோர் காம்பொனென்ட்டிலிருந்து வணக்கம்! இந்த டயலாக் கட்டளை முறையில் திறக்கப்பட்டது.');
}
};

render() {
return (
<div style={{ padding: '20px', textAlign: 'center' }}>
<h2>Ref வழியாக பெற்றோர்-குழந்தை தொடர்பு</h2>
<p>ஒரு பெற்றோர் காம்பொனென்ட் அதன் குழந்தை கிளாஸ் காம்பொனென்ட்டின் ஒரு முறையை எவ்வாறு கட்டளை முறையில் கட்டுப்படுத்த முடியும் என்பதை இது நிரூபிக்கிறது.</p>
<button
onClick={this.handleOpenDialog}
style={{ padding: '12px 25px', background: '#007bff', color: 'white', border: 'none', borderRadius: '6px', cursor: 'pointer', fontSize: '1.1em' }}
>
கட்டளை டயலாக்கைத் திற
</button>
<DialogBox ref={this.dialogRef} /> // ஒரு கிளாஸ் காம்பொனென்ட் நிகழ்வுக்கு ref-ஐ இணைக்கவும்
</div>
);
}
}

இங்கே, AppWithDialog அதன் ref வழியாக DialogBox காம்பொனென்ட்டின் open முறையை நேரடியாக அழைக்க முடியும். ஒரு மோடைலைக் காட்டுவது, ஒரு படிவத்தை மீட்டமைப்பது, அல்லது ஒரு குழந்தை காம்பொனென்ட்டிற்குள் இணைக்கப்பட்ட வெளிப்புற UI உறுப்புகளை நிரலாக்க முறையில் கட்டுப்படுத்துவது போன்ற செயல்களைத் தூண்டுவதற்கு இந்த முறை பயனுள்ளதாக இருக்கும். இருப்பினும், பெரும்பாலான சூழ்நிலைகளுக்கு ப்ராப்-அடிப்படையிலான தொடர்புக்கு சாதகமாக இருப்பது பொதுவாக பரிந்துரைக்கப்படுகிறது, தெளிவான மற்றும் கணிக்கக்கூடிய தரவு ஓட்டத்தை பராமரிக்க தரவு மற்றும் கால்பேக்குகளை பெற்றோரிடமிருந்து குழந்தைக்கு அனுப்புதல். குழந்தை காம்பொனென்ட் முறைகளுக்கான refs-க்கு அந்த செயல்கள் உண்மையாகவே கட்டளை முறையாகவும், வழக்கமான ப்ராப்/ஸ்டேட் ஓட்டத்திற்குப் பொருந்தாதபோதும் மட்டுமே செல்லுங்கள்.

ஒரு ஃபங்ஷனல் காம்பொனென்ட்டுடன் Ref-ஐ இணைத்தல் (ஒரு முக்கியமான வேறுபாடு)

நீங்கள் createRef()-ஐப் பயன்படுத்தி ஒரு ஃபங்ஷனல் காம்பொனென்ட்டுடன் நேரடியாக ஒரு ref-ஐ இணைக்க முடியாது என்பது ஒரு பொதுவான தவறான கருத்து மற்றும் ஒரு முக்கியமான வேறுபாட்டுப் புள்ளி. ஃபங்ஷனல் காம்பொனென்ட்கள், அவற்றின் இயல்பால், கிளாஸ் காம்பொனென்ட்கள் கொண்டிருக்கும் அதே வழியில் நிகழ்வுகளைக் கொண்டிருக்கவில்லை. நீங்கள் ஒரு ஃபங்ஷனல் காம்பொனென்ட்டுக்கு நேரடியாக ஒரு ref-ஐ ஒதுக்க முயற்சித்தால் (எ.கா., <MyFunctionalComponent ref={this.myRef} />), ரியாக்ட் டெவலப்மெண்ட் பயன்முறையில் ஒரு எச்சரிக்கையை வெளியிடும், ஏனெனில் .current-க்கு ஒதுக்க ஒரு காம்பொனென்ட் நிகழ்வு இல்லை.

உங்கள் குறிக்கோள் ஒரு பெற்றோர் காம்பொனென்ட் (இது createRef-ஐப் பயன்படுத்தும் ஒரு கிளாஸ் காம்பொனென்ட்டாக இருக்கலாம், அல்லது useRef-ஐப் பயன்படுத்தும் ஒரு ஃபங்ஷனல் காம்பொனென்ட்டாக இருக்கலாம்) ஒரு ஃபங்ஷனல் குழந்தை காம்பொனென்ட்டிற்குள் ரெண்டர் செய்யப்பட்ட ஒரு DOM உறுப்பை அணுகுவதாக இருந்தால், நீங்கள் React.forwardRef-ஐப் பயன்படுத்த வேண்டும். இந்த உயர்-வரிசை காம்பொனென்ட், ஃபங்ஷனல் காம்பொனென்ட்கள் ஒரு குறிப்பிட்ட DOM நோட் அல்லது தங்களுக்குள் ஒரு கட்டாய கைப்பிடிக்கு ஒரு ref-ஐ வெளிப்படுத்த அனுமதிக்கிறது.

மாற்றாக, நீங்கள் ஒரு ஃபங்ஷனல் காம்பொனென்ட்டிற்குள் பணிபுரிந்து ஒரு ref-ஐ உருவாக்கி நிர்வகிக்க வேண்டும் என்றால், பொருத்தமான வழிமுறை useRef ஹூக் ஆகும், இது பின்னர் ஒரு ஒப்பீட்டுப் பிரிவில் சுருக்கமாக விவாதிக்கப்படும். createRef அடிப்படையில் கிளாஸ் காம்பொனென்ட்கள் மற்றும் அவற்றின் நிகழ்வு-அடிப்படையிலான இயல்புடன் பிணைக்கப்பட்டுள்ளது என்பதை நினைவில் கொள்வது மிகவும் முக்கியம்.

DOM நோட் அல்லது காம்பொனென்ட் நிகழ்வை அணுகுதல்: `.current` பண்பு விளக்கப்பட்டது

ref ஊடாட்டத்தின் மையம் React.createRef()-ஆல் உருவாக்கப்பட்ட ref ஆப்ஜெக்ட்டின் .current பண்பைச் சுற்றியே சுழல்கிறது. அதன் வாழ்க்கைச் சுழற்சியைப் புரிந்துகொள்வதும், அது என்ன வைத்திருக்க முடியும் என்பதும் திறமையான ref நிர்வாகத்திற்கு முதன்மையானது.

`.current` பண்பு: கட்டளை கட்டுப்பாட்டிற்கான உங்கள் நுழைவாயில்

.current பண்பு என்பது ரியாக்ட் நிர்வகிக்கும் ஒரு மாற்றக்கூடிய ஆப்ஜெக்ட். இது குறிப்பிடப்பட்ட உறுப்பு அல்லது காம்பொனென்ட் நிகழ்விற்கான நேரடி இணைப்பாக செயல்படுகிறது. அதன் மதிப்பு காம்பொனென்ட்டின் வாழ்க்கைச் சுழற்சி முழுவதும் மாறுகிறது:

• துவக்கம்: நீங்கள் முதலில் கன்ஸ்ட்ரக்டரில் React.createRef()-ஐ அழைக்கும்போது, ref ஆப்ஜெக்ட் உருவாக்கப்பட்டு, அதன் .current பண்பு null-க்கு துவக்கப்படுகிறது. இது ஏனென்றால் இந்த கட்டத்தில், காம்பொனென்ட் இன்னும் ரெண்டர் செய்யப்படவில்லை, மற்றும் ref சுட்டிக்காட்ட எந்த DOM உறுப்பு அல்லது காம்பொனென்ட் நிகழ்வும் இல்லை.
• மவுண்டிங்: காம்பொனென்ட் DOM-ல் ரெண்டர் செய்யப்பட்டு, ref பண்பு கொண்ட உறுப்பு உருவாக்கப்பட்டவுடன், ரியாக்ட் உண்மையான DOM நோட் அல்லது கிளாஸ் காம்பொனென்ட் நிகழ்வை உங்கள் ref ஆப்ஜெக்ட்டின் .current பண்பிற்கு ஒதுக்குகிறது. இது பொதுவாக render முறை முடிந்த உடனேயே மற்றும் componentDidMount அழைக்கப்படுவதற்கு முன்பு நடக்கிறது. எனவே, componentDidMount .current-ஐ அணுகவும் ஊடாடவும் பாதுகாப்பான மற்றும் மிகவும் பொதுவான இடமாகும்.
• அன்மவுண்டிங்: காம்பொனென்ட் DOM-லிருந்து அன்மவுண்ட் செய்யப்படும்போது, ரியாக்ட் தானாகவே .current பண்பை மீண்டும் null-க்கு மீட்டமைக்கிறது. இது நினைவகக் கசிவுகளைத் தடுப்பதற்கும், உங்கள் பயன்பாடு DOM-ல் இனி இல்லாத உறுப்புகளுக்கான ரெஃபரன்ஸ்களை வைத்திருக்காமல் இருப்பதை உறுதி செய்வதற்கும் முக்கியமானது.
• புதுப்பித்தல்: ஒரு புதுப்பித்தலின் போது ஒரு உறுப்பில் ref பண்பு மாற்றப்பட்டால், பழைய ref-இன் current பண்பு null-க்கு அமைக்கப்படும், பின்னர் புதிய ref-இன் current பண்பு அமைக்கப்படும். இந்த நடத்தை குறைவாக பொதுவானது ஆனால் சிக்கலான மாறும் ref ஒதுக்கீடுகளுக்கு கவனிக்க வேண்டியது முக்கியம்.

import React from 'react';

class RefLifecycleLogger extends React.Component {
constructor(props) {
super(props);
this.myDivRef = React.createRef();
console.log('1. Constructor: this.myDivRef.current என்பது', this.myDivRef.current); // null
}

componentDidMount() {
console.log('3. componentDidMount: this.myDivRef.current என்பது', this.myDivRef.current); // உண்மையான DOM உறுப்பு
if (this.myDivRef.current) {
this.myDivRef.current.style.backgroundColor = '#d4edda'; // விளக்கத்திற்காக கட்டளை முறையில் ஸ்டைலிங்
this.myDivRef.current.innerText += ' - Ref செயலில் உள்ளது!';
}
}

componentDidUpdate(prevProps, prevState) {
console.log('4. componentDidUpdate: this.myDivRef.current என்பது', this.myDivRef.current); // உண்மையான DOM உறுப்பு (புதுப்பிப்புகளுக்குப் பிறகு)
}

componentWillUnmount() {
console.log('5. componentWillUnmount: this.myDivRef.current என்பது', this.myDivRef.current); // உண்மையான DOM உறுப்பு (null ஆவதற்கு சற்று முன்பு)
// இந்த கட்டத்தில், தேவைப்பட்டால் நீங்கள் சுத்தம் செய்யலாம்
}

render() {
// ஆரம்ப ரெண்டரில், this.myDivRef.current இன்னும் null ஆக உள்ளது, ஏனெனில் DOM இன்னும் உருவாக்கப்படவில்லை.
// அடுத்தடுத்த ரெண்டர்களில் (மவுண்டிற்குப் பிறகு), அது உறுப்பைக் கொண்டிருக்கும்.
console.log('2. Render: this.myDivRef.current என்பது', this.myDivRef.current);
return (
<div
ref={this.myDivRef}
style={{ padding: '20px', border: '1px solid #28a745', margin: '20px', minHeight: '80px', display: 'flex', alignItems: 'center' }}
>
<p>இது ஒரு ref இணைக்கப்பட்ட ஒரு div ஆகும்.</p>
</div>
);
}
}

RefLifecycleLogger-க்கான கன்சோல் வெளியீட்டைக் கவனிப்பது, this.myDivRef.current எப்போது கிடைக்கும் என்பது பற்றிய தெளிவான நுண்ணறிவை வழங்குகிறது. this.myDivRef.current null இல்லை என்பதை எப்போதும் சரிபார்க்க வேண்டியது முக்கியம், குறிப்பாக மவுண்டிங்கிற்கு முன்பு அல்லது அன்மவுண்டிங்கிற்குப் பிறகு இயங்கக்கூடிய முறைகளில்.

`.current` என்ன வைத்திருக்க முடியும்? உங்கள் Ref-இன் உள்ளடக்கங்களை ஆராய்தல்

current வைத்திருக்கும் மதிப்பின் வகை, நீங்கள் ref-ஐ எதனுடன் இணைக்கிறீர்கள் என்பதைப் பொறுத்தது:

• ஒரு HTML உறுப்புடன் இணைக்கப்பட்டால் (எ.கா., <div>, <input>): .current பண்பு உண்மையான அடிப்படை DOM உறுப்பைக் கொண்டிருக்கும். இது ஒரு சொந்த ஜாவாஸ்கிரிப்ட் ஆப்ஜெக்ட், அதன் முழு அளவிலான DOM API-களுக்கான அணுகலை வழங்குகிறது. உதாரணமாக, நீங்கள் ஒரு <input type="text">-க்கு ஒரு ref-ஐ இணைத்தால், .current ஒரு HTMLInputElement ஆப்ஜெக்ட்டாக இருக்கும், இது .focus() போன்ற முறைகளை அழைக்க, .value போன்ற பண்புகளைப் படிக்க, அல்லது .placeholder போன்ற பண்புகளை மாற்ற உங்களை அனுமதிக்கிறது. இது refs-க்கான மிகவும் பொதுவான பயன்பாட்டு நிகழ்வாகும்.

  this.inputRef.current.focus();
  this.videoRef.current.play();
  const { width, height } = this.divRef.current.getBoundingClientRect();

• ஒரு கிளாஸ் காம்பொனென்ட்டுடன் இணைக்கப்பட்டால் (எ.கா., <MyClassComponent />): .current பண்பு அந்த கிளாஸ் காம்பொனென்ட்டின் நிகழ்வைக் கொண்டிருக்கும். இதன் பொருள், நீங்கள் அந்த குழந்தை காம்பொனென்ட்டிற்குள் வரையறுக்கப்பட்ட முறைகளை நேரடியாக அழைக்கலாம் (எ.கா., childRef.current.someMethod()) அல்லது அதன் ஸ்டேட் அல்லது ப்ராப்ஸை அணுகலாம் (இருப்பினும், ஒரு ref வழியாக ஒரு குழந்தையிலிருந்து நேரடியாக ஸ்டேட்/ப்ராப்ஸை அணுகுவது பொதுவாக ப்ராப்ஸ் மற்றும் ஸ்டேட் புதுப்பிப்புகளுக்கு சாதகமாக ஊக்கமளிக்கப்படுவதில்லை). இது வழக்கமான ப்ராப்-அடிப்படையிலான ஊடாட்ட மாதிரிக்குள் பொருந்தாத குழந்தை காம்பொனென்ட்களில் குறிப்பிட்ட நடத்தைகளைத் தூண்டுவதற்கு சக்தி வாய்ந்தது.

  this.childComponentRef.current.resetForm();
  // அரிதாக, ஆனால் சாத்தியம்: console.log(this.childComponentRef.current.state.someValue);

• ஒரு ஃபங்ஷனல் காம்பொனென்ட்டுடன் இணைக்கப்பட்டால் (forwardRef வழியாக): முன்பு குறிப்பிட்டபடி, refs-ஐ ஃபங்ஷனல் காம்பொனென்ட்களுடன் நேரடியாக இணைக்க முடியாது. இருப்பினும், ஒரு ஃபங்ஷனல் காம்பொனென்ட் React.forwardRef-உடன் சுற்றப்பட்டிருந்தால், .current பண்பு ஃபங்ஷனல் காம்பொனென்ட் வெளிப்படையாக அனுப்பப்பட்ட ref வழியாக வெளிப்படுத்தும் எந்த மதிப்பையும் கொண்டிருக்கும். இது பொதுவாக ஃபங்ஷனல் காம்பொனென்ட்டிற்குள் ஒரு DOM உறுப்பு, அல்லது கட்டாய முறைகளைக் கொண்ட ஒரு ஆப்ஜெக்ட் (forwardRef-உடன் இணைந்து useImperativeHandle ஹூக்கைப் பயன்படுத்தி) ஆகும்.

  // பெற்றோரில், myForwardedRef.current வெளிப்படுத்தப்பட்ட DOM நோட் அல்லது ஆப்ஜெக்ட்டாக இருக்கும்
  this.myForwardedRef.current.focus();
  this.myForwardedRef.current.customResetMethod();

`createRef`-க்கான நடைமுறை பயன்பாட்டு நிகழ்வுகள் செயல்பாட்டில்

React.createRef()-இன் பயன்பாட்டை உண்மையாகப் புரிந்துகொள்ள, எளிய ஃபோகஸ் நிர்வாகத்திற்கு அப்பால், அது இன்றியமையாததாக நிரூபிக்கும் மேலும் விரிவான, உலகளவில் தொடர்புடைய சூழ்நிலைகளை ஆராய்வோம்.

1. கலாச்சாரங்கள் முழுவதும் ஃபோகஸ், டெக்ஸ்ட் தேர்வு, அல்லது மீடியா பிளேபேக்கை நிர்வகித்தல்

இவை கட்டாய UI ஊடாட்டங்களின் முதன்மை எடுத்துக்காட்டுகள். ஒரு உலகளாவிய பார்வையாளர்களுக்காக வடிவமைக்கப்பட்ட ஒரு பல-படி படிவத்தை கற்பனை செய்து பாருங்கள். ஒரு பயனர் ஒரு பகுதியை முடித்த பிறகு, மொழி அல்லது இயல்புநிலை டெக்ஸ்ட் திசை (இடமிருந்து-வலம் அல்லது வலமிருந்து-இடம்) எதுவாக இருந்தாலும், அடுத்த பகுதியின் முதல் உள்ளீட்டிற்கு தானாகவே ஃபோகஸை மாற்ற விரும்பலாம். Refs தேவையான கட்டுப்பாட்டை வழங்குகின்றன.

import React from 'react';

class DynamicFocusForm extends React.Component {
constructor(props) {
super(props);
this.firstNameRef = React.createRef();
this.lastNameRef = React.createRef();
this.emailRef = React.createRef();
this.state = { currentStep: 1 };
}

componentDidMount() {
// காம்பொனென்ட் மவுண்ட் ஆகும்போது முதல் உள்ளீட்டில் ஃபோகஸ் செய்யவும்
this.firstNameRef.current.focus();
}

handleNextStep = (nextRef) => {
this.setState(prevState => ({ currentStep: prevState.currentStep + 1 }), () => {
// ஸ்டேட் புதுப்பிப்புகள் மற்றும் காம்பொனென்ட் மறு-ரெண்டர்களுக்குப் பிறகு, அடுத்த உள்ளீட்டை ஃபோகஸ் செய்யவும்
if (nextRef.current) {
nextRef.current.focus();
}
});
};

render() {
const { currentStep } = this.state;
const formSectionStyle = { border: '1px solid #0056b3', padding: '20px', margin: '15px 0', borderRadius: '8px', background: '#e7f0fa' };
const inputStyle = { width: '100%', padding: '10px', margin: '8px 0', border: '1px solid #ccc', borderRadius: '4px' };
const buttonStyle = { padding: '10px 20px', background: '#007bff', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', marginTop: '10px' };

return (
<div style={{ maxWidth: '600px', margin: '30px auto', padding: '25px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)', borderRadius: '10px', background: 'white' }}>
<h2>Ref-நிர்வகிக்கப்பட்ட ஃபோகஸ் உடன் பல-படி படிவம்</h2>
<p>தற்போதைய படி: <strong>{currentStep}</strong></p>

{currentStep === 1 && (
<div style={formSectionStyle}>
<h3>தனிப்பட்ட விவரங்கள்</h3>
<label htmlFor="firstName">முதல் பெயர்:</label>
<input id="firstName" type="text" ref={this.firstNameRef} style={inputStyle} placeholder="எ.கா., ஜான்" />

<label htmlFor="lastName">கடைசி பெயர்:</label>
<input id="lastName" type="text" ref={this.lastNameRef} style={inputStyle} placeholder="எ.கா., டோ" />

<button onClick={() => this.handleNextStep(this.emailRef)} style={buttonStyle}>அடுத்து &rarr;</button>
</div>
)}

{currentStep === 2 && (
<div style={formSectionStyle}>
<h3>தொடர்புத் தகவல்</h3>
<label htmlFor="email">மின்னஞ்சல்:</label>
<input id="email" type="email" ref={this.emailRef} style={inputStyle} placeholder="எ.கா., john.doe@example.com" />

<p>... மற்ற தொடர்பு புலங்கள் ...</p>

<button onClick={() => alert('படிவம் சமர்ப்பிக்கப்பட்டது!')} style={buttonStyle}>சமர்ப்பிக்கவும்</button>
</div>
)}

<p><em>இந்த ஊடாட்டம் அணுகல்தன்மை மற்றும் பயனர் அனுபவத்தை கணிசமாக மேம்படுத்துகிறது, குறிப்பாக உலகளவில் கீபோர்டு வழிசெலுத்தல் அல்லது உதவித் தொழில்நுட்பங்களைச் சார்ந்திருக்கும் பயனர்களுக்கு.</em></p>
</div>
);
}
}

இந்த எடுத்துக்காட்டு, createRef-ஐப் பயன்படுத்தி நிரலாக்க முறையில் ஃபோகஸை நிர்வகிக்கும் ஒரு நடைமுறை பல-படி படிவத்தை நிரூபிக்கிறது. இது ஒரு மென்மையான மற்றும் அணுகக்கூடிய பயனர் பயணத்தை உறுதி செய்கிறது, இது பல்வேறு மொழி மற்றும் கலாச்சார சூழல்களில் பயன்படுத்தப்படும் பயன்பாடுகளுக்கு ஒரு முக்கியமான கருத்தாகும். இதேபோல், மீடியா பிளேயர்களுக்கு, refs உங்களை HTML5 <video> அல்லது <audio> உறுப்புகளின் சொந்த API-களுடன் நேரடியாக ஊடாடும் தனிப்பயன் கட்டுப்பாடுகளை (ப்ளே, பாஸ், வால்யூம், சீக்) உருவாக்க அனுமதிக்கிறது, பிரவுசர் இயல்புநிலைகளைப் பொருட்படுத்தாமல் ஒரு சீரான அனுபவத்தை வழங்குகிறது.

2. கட்டாய அனிமேஷன்கள் மற்றும் கேன்வாஸ் ஊடாட்டங்களைத் தூண்டுதல்

அறிவிப்பு அனிமேஷன் நூலகங்கள் பல UI விளைவுகளுக்கு சிறந்தவை என்றாலும், சில மேம்பட்ட அனிமேஷன்கள், குறிப்பாக HTML5 கேன்வாஸ் API, WebGL, அல்லது ரியாக்ட்டின் ரெண்டர் சுழற்சிக்கு வெளியே சிறப்பாக நிர்வகிக்கப்படும் உறுப்பு பண்புகளின் மீது நுணுக்கமான கட்டுப்பாடு தேவைப்படும் அனிமேஷன்கள், refs-லிருந்து பெரிதும் பயனடைகின்றன. உதாரணமாக, ஒரு கேன்வாஸ் உறுப்பில் ஒரு நிகழ்நேர தரவு காட்சிப்படுத்தல் அல்லது ஒரு விளையாட்டை உருவாக்குவது, ஒரு பிக்சல் பஃபரில் நேரடியாக வரைவதை உள்ளடக்கியது, இது இயல்பாகவே ஒரு கட்டாய செயல்முறையாகும்.

import React from 'react';

class CanvasAnimator extends React.Component {
constructor(props) {
super(props);
this.canvasRef = React.createRef();
this.animationFrameId = null;
}

componentDidMount() {
this.startAnimation();
}

componentWillUnmount() {
this.stopAnimation();
}

startAnimation = () => {
const canvas = this.canvasRef.current;
if (!canvas) return;

const ctx = canvas.getContext('2d');
let angle = 0;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 50;

const animate = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height); // கேன்வாஸை அழிக்கவும்

// ஒரு சுழலும் சதுரத்தை வரையவும்
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(angle);
ctx.fillStyle = '#6f42c1';
ctx.fillRect(-radius / 2, -radius / 2, radius, radius);
ctx.restore();

angle += 0.05; // சுழற்சிக்காக கோணத்தை அதிகரிக்கவும்

this.animationFrameId = requestAnimationFrame(animate);
};

this.animationFrameId = requestAnimationFrame(animate);
};

stopAnimation = () => {
if (this.animationFrameId) {
cancelAnimationFrame(this.animationFrameId);
}
};

render() {
return (
<div style={{ textAlign: 'center', margin: '30px auto', border: '1px solid #ced4da', padding: '20px', borderRadius: '8px', background: '#f8f9fa' }}>
<h3>createRef உடன் கட்டாய கேன்வாஸ் அனிமேஷன்</h3>
<p>இந்த கேன்வாஸ் அனிமேஷன் ஒரு ref வழியாக பிரவுசர் API-களைப் பயன்படுத்தி நேரடியாகக் கட்டுப்படுத்தப்படுகிறது.</p>
<canvas ref={this.canvasRef} width="300" height="200" style={{ border: '1px solid #adb5bd', background: 'white' }}>
உங்கள் பிரவுசர் HTML5 கேன்வாஸ் டேக்கை ஆதரிக்கவில்லை.
</canvas>
<p><em>அத்தகைய நேரடிக் கட்டுப்பாடு உயர்-செயல்திறன் கிராபிக்ஸ், விளையாட்டுகள், அல்லது உலகளவில் பல்வேறு தொழில்களில் பயன்படுத்தப்படும் சிறப்பு தரவு காட்சிப்படுத்தல்களுக்கு இன்றியமையாதது.</em></p>
</div>
);
}
}

இந்த காம்பொனென்ட் ஒரு கேன்வாஸ் உறுப்பை வழங்குகிறது மற்றும் அதன் 2D ரெண்டரிங் சூழலுக்கான நேரடி அணுகலைப் பெற ஒரு ref-ஐப் பயன்படுத்துகிறது. requestAnimationFrame-ஆல் இயக்கப்படும் அனிமேஷன் லூப், பின்னர் ஒரு சுழலும் சதுரத்தை கட்டாயமாக வரைந்து புதுப்பிக்கிறது. இந்த முறை ஊடாடும் தரவு டாஷ்போர்டுகள், ஆன்லைன் வடிவமைப்பு கருவிகள், அல்லது பயனரின் புவியியல் இருப்பிடம் அல்லது சாதன திறன்களைப் பொருட்படுத்தாமல், துல்லியமான, ஃபிரேம்-பை-ஃபிரேம் ரெண்டரிங் தேவைப்படும் சாதாரண விளையாட்டுகளை உருவாக்குவதற்கு அடிப்படையானது.

3. மூன்றாம் தரப்பு DOM நூலகங்களுடன் ஒருங்கிணைத்தல்: ஒரு தடையற்ற பாலம்

refs-ஐப் பயன்படுத்துவதற்கான மிகவும் கட்டாயமான காரணங்களில் ஒன்று, DOM-ஐ நேரடியாகக் கையாளும் வெளிப்புற ஜாவாஸ்கிரிப்ட் நூலகங்களுடன் ரியாக்ட்டை ஒருங்கிணைப்பதாகும். பல சக்திவாய்ந்த நூலகங்கள், குறிப்பாக பழையவை அல்லது குறிப்பிட்ட ரெண்டரிங் பணிகளில் (விளக்கப்படம், வரைபடம், அல்லது ரிச் டெக்ஸ்ட் எடிட்டிங் போன்றவை) கவனம் செலுத்துபவை, ஒரு DOM உறுப்பை ஒரு இலக்காக எடுத்து, பின்னர் அதன் உள்ளடக்கத்தை தாங்களே நிர்வகிப்பதன் மூலம் செயல்படுகின்றன. ரியாக்ட், அதன் அறிவிப்பு பயன்முறையில், அதே DOM துணை மரத்தைக் கட்டுப்படுத்த முயற்சிப்பதன் மூலம் இந்த நூலகங்களுடன் முரண்படும். Refs இந்த முரண்பாட்டைத் தடுக்கின்றன, வெளிப்புற நூலகத்திற்கு ஒரு நியமிக்கப்பட்ட 'கொள்கலனை' வழங்குவதன் மூலம்.

import React from 'react';
import * as d3 from 'd3'; // D3.js நிறுவப்பட்டு இறக்குமதி செய்யப்பட்டதாகக் கருதுதல்

class D3BarChart extends React.Component {
constructor(props) {
super(props);
this.chartContainerRef = React.createRef();
}

// காம்பொனென்ட் மவுண்ட் ஆகும்போது, விளக்கப்படத்தை வரையவும்
componentDidMount() {
this.drawChart();
}

// காம்பொனென்ட் புதுப்பிக்கப்படும்போது (எ.கா., props.data மாறும்போது), விளக்கப்படத்தைப் புதுப்பிக்கவும்
componentDidUpdate(prevProps) {
if (prevProps.data !== this.props.data) {
this.drawChart();
}
}

// காம்பொனென்ட் அன்மவுண்ட் ஆகும்போது, நினைவகக் கசிவுகளைத் தடுக்க D3 உறுப்புகளை சுத்தம் செய்யவும்
componentWillUnmount() {
d3.select(this.chartContainerRef.current).selectAll('*').remove();
}

drawChart = () => {
const data = this.props.data || [40, 80, 20, 100, 60, 90]; // இயல்புநிலை தரவு
const node = this.chartContainerRef.current;
if (!node) return; // ref கிடைப்பதை உறுதி செய்யவும்

// D3 ஆல் வரையப்பட்ட முந்தைய விளக்கப்பட உறுப்புகளை அழிக்கவும்
d3.select(node).selectAll('*').remove();

const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const width = 460 - margin.left - margin.right;
const height = 300 - margin.top - margin.bottom;

const svg = d3.select(node)
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);

// அளவுகளை அமைக்கவும்
const x = d3.scaleBand()
.range([0, width])
.padding(0.1);

const y = d3.scaleLinear()
.range([height, 0]);

x.domain(data.map((d, i) => i)); // எளிமைக்காக குறியீட்டை டொமைனாகப் பயன்படுத்தவும்
y.domain([0, d3.max(data)]);

// பார்களைச் சேர்க்கவும்
svg.selectAll('.bar')
.data(data)
.enter().append('rect')
.attr('class', 'bar')
.attr('x', (d, i) => x(i))
.attr('width', x.bandwidth())
.attr('y', d => y(d))
.attr('height', d => height - y(d))
.attr('fill', '#17a2b8');

// X அச்சினைச் சேர்க்கவும்
svg.append('g')
.attr('transform', `translate(0,${height})`)
.call(d3.axisBottom(x));

// Y அச்சினைச் சேர்க்கவும்
svg.append('g')
.call(d3.axisLeft(y));
};

render() {
return (
<div style={{ textAlign: 'center', margin: '30px auto', border: '1px solid #00a0b2', padding: '20px', borderRadius: '8px', background: '#e0f7fa' }}>
<h3>ரியாக்ட் createRef உடன் D3.js விளக்கப்பட ஒருங்கிணைப்பு</h3>
<p>இந்த தரவு காட்சிப்படுத்தல் ஒரு ரியாக்ட்-நிர்வகிக்கப்பட்ட கொள்கலனுக்குள் D3.js ஆல் ரெண்டர் செய்யப்படுகிறது.</p>
<div ref={this.chartContainerRef} /> // D3.js இந்த div-க்குள் ரெண்டர் செய்யும்
<p><em>அத்தகைய சிறப்பு நூலகங்களை ஒருங்கிணைப்பது தரவு-கனமான பயன்பாடுகளுக்கு முக்கியமானது, இது பல்வேறு தொழில்கள் மற்றும் பிராந்தியங்களில் உள்ள பயனர்களுக்கு சக்திவாய்ந்த பகுப்பாய்வுக் கருவிகளை வழங்குகிறது.</em></p>
</div>
);
}
}

இந்த விரிவான எடுத்துக்காட்டு, ஒரு D3.js பார் விளக்கப்படத்தை ஒரு ரியாக்ட் கிளாஸ் காம்பொனென்ட்டிற்குள் ஒருங்கிணைப்பதைக் காட்டுகிறது. chartContainerRef D3.js-க்கு அதன் ரெண்டரிங்கைச் செய்யத் தேவையான குறிப்பிட்ட DOM நோடை வழங்குகிறது. ரியாக்ட் கொள்கலன் <div>-இன் வாழ்க்கைச் சுழற்சியைக் கையாளுகிறது, அதே நேரத்தில் D3.js அதன் உள் உள்ளடக்கத்தை நிர்வகிக்கிறது. `componentDidUpdate` மற்றும் `componentWillUnmount` முறைகள் தரவு மாறும்போது விளக்கப்படத்தைப் புதுப்பிக்கவும், தேவையான சுத்தம் செய்யவும், நினைவகக் கசிவுகளைத் தடுக்கவும், மற்றும் ஒரு பதிலளிக்கக்கூடிய அனுபவத்தை உறுதி செய்யவும் இன்றியமையாதவை. இந்த முறை உலகளவில் பொருந்தக்கூடியது, டெவலப்பர்கள் உலகளாவிய டாஷ்போர்டுகள் மற்றும் பகுப்பாய்வு தளங்களுக்கு ரியாக்ட்டின் காம்பொனென்ட் மாதிரி மற்றும் சிறப்பு, உயர்-செயல்திறன் காட்சிப்படுத்தல் நூலகங்கள் இரண்டிலும் சிறந்ததைப் பயன்படுத்த அனுமதிக்கிறது.

4. டைனமிக் தளவமைப்புகளுக்கு உறுப்பு பரிமாணங்கள் அல்லது நிலையை அளவிடுதல்

மிகவும் மாறும் அல்லது பதிலளிக்கக்கூடிய தளவமைப்புகளுக்கு, அல்லது தெரியும் உருப்படிகளை மட்டுமே ரெண்டர் செய்யும் மெய்நிகராக்கப்பட்ட பட்டியல்கள் போன்ற அம்சங்களைச் செயல்படுத்த, உறுப்புகளின் துல்லியமான பரிமாணங்கள் மற்றும் நிலையை அறிவது முக்கியம். Refs உங்களை getBoundingClientRect() முறையை அணுக அனுமதிக்கிறது, இது இந்த முக்கியமான தகவலை நேரடியாக DOM-லிருந்து வழங்குகிறது.

import React from 'react';

class ElementDimensionLogger extends React.Component {
constructor(props) {
super(props);
this.measurableDivRef = React.createRef();
this.state = {
width: 0,
height: 0,
top: 0,
left: 0,
message: 'அளவிட பட்டனைக் கிளிக் செய்யவும்!'
};
}

componentDidMount() {
// ஆரம்ப அளவீடு பெரும்பாலும் பயனுள்ளதாக இருக்கும், ஆனால் பயனர் செயலால் தூண்டப்படலாம்
this.measureElement();
// மாறும் தளவமைப்புகளுக்கு, நீங்கள் window resize நிகழ்வுகளைக் கேட்கலாம்
window.addEventListener('resize', this.measureElement);
}

componentWillUnmount() {
window.removeEventListener('resize', this.measureElement);
}

measureElement = () => {
if (this.measurableDivRef.current) {
const rect = this.measurableDivRef.current.getBoundingClientRect();
this.setState({
width: Math.round(rect.width),
height: Math.round(rect.height),
top: Math.round(rect.top),
left: Math.round(rect.left),
message: 'பரிமாணங்கள் புதுப்பிக்கப்பட்டன.'
});
} else {
this.setState({ message: 'உறுப்பு இன்னும் ரெண்டர் செய்யப்படவில்லை.' });
}
};

render() {
const { width, height, top, left, message } = this.state;
const boxStyle = {
width: '70%',
minHeight: '150px', border: '3px solid #ffc107', margin: '25px auto', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', background: '#fff3cd', borderRadius: '8px', textAlign: 'center' };
return (
<div style={{ maxWidth: '700px', margin: '30px auto', padding: '25px', boxShadow: '0 4px 12px rgba(0,0,0,0.08)', borderRadius: '10px', background: 'white' }}>
<h3>createRef உடன் உறுப்பு பரிமாணங்களை அளவிடுதல்</h3>
<p>இந்த எடுத்துக்காட்டு ஒரு இலக்கு உறுப்பின் அளவு மற்றும் நிலையை மாறும் வகையில் பெற்று காட்டுகிறது.</p>
<div ref={this.measurableDivRef} style={boxStyle}>
<p><strong>நான் அளவிடப்படும் உறுப்பு.</strong></p>
<p>உங்கள் பிரவுசர் விண்டோவை மறுஅளவாக்கி, புதுப்பித்தல்/கைமுறை தூண்டுதலில் அளவீடுகள் மாறுவதைப் பார்க்கவும்.</p>
</div>
<button
onClick={this.measureElement}
style={{ padding: '10px 20px', background: '#6c757d', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', marginBottom: '15px' }}
>
இப்போது அளவிடு
</button>
<div style={{ background: '#f0f0f0', padding: '15px', borderRadius: '6px' }}>
<p><strong>நேரடி பரிமாணங்கள்:</strong></p>
<ul style={{ listStyleType: 'none', padding: 0, textAlign: 'left', margin: '0 auto', maxWidth: '300px' }}>
<li>அகலம்: <b>{width}px</b></li>
<li>உயரம்: <b>{height}px</b></li>
<li>மேல் நிலை (வியூபோர்ட்): <b>{top}px</b></li>
<li>இடது நிலை (வியூபோர்ட்): <b>{left}px</b></li>
</ul>
<p><em>துல்லியமான உறுப்பு அளவீடு உலகளவில் பல்வேறு சாதனங்களில் பதிலளிக்கக்கூடிய வடிவமைப்புகள் மற்றும் செயல்திறனை மேம்படுத்துவதற்கு முக்கியமானது.</em></p>
</div>
</div>
);
}
}

இந்த காம்பொனென்ட் createRef-ஐப் பயன்படுத்தி ஒரு div உறுப்பின் getBoundingClientRect()-ஐப் பெறுகிறது, அதன் நிகழ்நேர பரிமாணங்கள் மற்றும் நிலையை வழங்குகிறது. இந்தத் தகவல் சிக்கலான தளவமைப்பு சரிசெய்தல்களைச் செயல்படுத்துவதற்கும், ஒரு மெய்நிகராக்கப்பட்ட ஸ்க்ரோல் பட்டியலில் தெரிவுநிலையைத் தீர்மானிப்பதற்கும், அல்லது உறுப்புகள் ஒரு குறிப்பிட்ட வியூபோர்ட் பகுதிக்குள் இருப்பதை உறுதி செய்வதற்கும் கூட விலைமதிப்பற்றது. ஒரு உலகளாவிய பார்வையாளர்களுக்கு, திரை அளவுகள், ரெசொலூஷன்கள், மற்றும் பிரவுசர் சூழல்கள் பரவலாக வேறுபடும் இடத்தில், உண்மையான DOM அளவீடுகளின் அடிப்படையில் துல்லியமான தளவமைப்புக் கட்டுப்பாடு ஒரு சீரான மற்றும் உயர்-தரமான பயனர் அனுபவத்தை வழங்குவதில் ஒரு முக்கிய காரணியாகும்.

`createRef`-ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள் மற்றும் எச்சரிக்கைகள்

createRef சக்திவாய்ந்த கட்டளைக் கட்டுப்பாட்டை வழங்கினாலும், அதன் தவறான பயன்பாடு நிர்வகிக்கவும் பிழைத்திருத்தம் செய்யவும் கடினமான குறியீட்டிற்கு வழிவகுக்கும். சிறந்த நடைமுறைகளைப் பின்பற்றுவது அதன் சக்தியைப் பொறுப்புடன் பயன்படுத்துவதற்கு அவசியம்.

1. அறிவிப்பு அணுகுமுறைகளுக்கு முன்னுரிமை அளியுங்கள்: பொன் விதி

refs ஒரு "தப்பிக்கும் வழி", ரியாக்ட்டில் ஊடாட்டத்தின் முதன்மை முறை அல்ல என்பதை எப்போதும் நினைவில் கொள்ளுங்கள். ஒரு ref-ஐத் தேடுவதற்கு முன்பு, உங்களை நீங்களே கேட்டுக்கொள்ளுங்கள்: இதை ஸ்டேட் மற்றும் ப்ராப்ஸ் மூலம் அடைய முடியுமா? பதில் ஆம் என்றால், அதுவே கிட்டத்தட்ட எப்போதும் சிறந்த, மேலும் "ரியாக்ட்-இயல்பான" அணுகுமுறையாகும். உதாரணமாக, நீங்கள் ஒரு உள்ளீட்டின் மதிப்பை மாற்ற விரும்பினால், inputRef.current.value-ஐ நேரடியாக அமைக்க ஒரு ref-ஐப் பயன்படுத்துவதை விட, ஸ்டேட்டுடன் கட்டுப்படுத்தப்பட்ட காம்பொனென்ட்களைப் பயன்படுத்தவும்.

2. Refs கட்டளை ஊடாட்டங்களுக்கானது, ஸ்டேட் நிர்வாகத்திற்கானது அல்ல

Refs DOM உறுப்புகள் அல்லது காம்பொனென்ட் நிகழ்வுகளில் நேரடி, கட்டளைச் செயல்களை உள்ளடக்கிய பணிகளுக்கு மிகவும் பொருத்தமானவை. அவை கட்டளைகள்: "இந்த உள்ளீட்டை ஃபோகஸ் செய்," "இந்த வீடியோவை ப்ளே செய்," "இந்த பகுதிக்கு ஸ்க்ரோல் செய்." அவை ஸ்டேட்டின் அடிப்படையில் ஒரு காம்பொனென்ட்டின் அறிவிப்பு UI-ஐ மாற்றுவதற்காக அல்ல. ஒரு உறுப்பின் ஸ்டைல் அல்லது உள்ளடக்கத்தை ஒரு ref வழியாக நேரடியாகக் கையாளுவது, அது ப்ராப்ஸ் அல்லது ஸ்டேட்டால் கட்டுப்படுத்தப்படக்கூடியதாக இருந்தால், ரியாக்ட்டின் மெய்நிகர் DOM உண்மையான DOM-உடன் ஒத்திசைவற்ற நிலைக்கு வழிவகுக்கும், இது கணிக்க முடியாத நடத்தை மற்றும் ரெண்டரிங் சிக்கல்களை ஏற்படுத்தும்.

3. Refs மற்றும் ஃபங்ஷனல் காம்பொனென்ட்கள்: `useRef` மற்றும் `forwardRef`-ஐ ஏற்றுக்கொள்ளுங்கள்

ஃபங்ஷனல் காம்பொனென்ட்களுக்குள் நவீன ரியாக்ட் உருவாக்கத்திற்கு, React.createRef() நீங்கள் பயன்படுத்தும் கருவி அல்ல. அதற்கு பதிலாக, நீங்கள் useRef ஹூக்கைச் சார்ந்திருப்பீர்கள். useRef ஹூக் createRef போன்ற ஒரு மாற்றக்கூடிய ref ஆப்ஜெக்ட்டை வழங்குகிறது, அதன் .current பண்பு அதே கட்டளை ஊடாட்டங்களுக்குப் பயன்படுத்தப்படலாம். இது ஒரு மறு-ரெண்டரை ஏற்படுத்தாமல் காம்பொனென்ட் மறு-ரெண்டர்கள் முழுவதும் அதன் மதிப்பை பராமரிக்கிறது, இது ஒரு DOM நோட் அல்லது மறு-ரெண்டர்கள் முழுவதும் நீடிக்க வேண்டிய எந்த மாற்றக்கூடிய மதிப்பையும் வைத்திருக்க சரியானதாக ஆக்குகிறது.

import React, { useRef, useEffect } from 'react';

function FunctionalComponentWithRef() {
const myInputRef = useRef(null); // null உடன் துவக்கவும்

useEffect(() => {
// இது காம்பொனென்ட் மவுண்ட் ஆன பிறகு இயங்கும்
if (myInputRef.current) {
myInputRef.current.focus();
console.log('ஃபங்ஷனல் காம்பொனென்ட் உள்ளீடு ஃபோகஸ் செய்யப்பட்டது!');
}
}, []); // வெற்று சார்பு வரிசை இது மவுண்டில் ஒருமுறை மட்டுமே இயங்குவதை உறுதி செய்கிறது

const handleLogValue = () => {
if (myInputRef.current) {
alert(`உள்ளீட்டு மதிப்பு: ${myInputRef.current.value}`);
}
};

return (
<div style={{ margin: '20px', padding: '20px', border: '1px solid #009688', borderRadius: '8px', background: '#e0f2f1' }}>
<h3>ஒரு ஃபங்ஷனல் காம்பொனென்ட்டில் useRef-ஐப் பயன்படுத்துதல்</h3>
<label htmlFor="funcInput">ஏதாவது டைப் செய்யவும்:</label><br />
<input id="funcInput" type="text" ref={myInputRef} placeholder="நான் தானாக ஃபோகஸ் செய்யப்பட்டுள்ளேன்!" style={{ padding: '8px', margin: '10px 0', borderRadius: '4px', border: '1px solid #ccc' }} /><br />
<button onClick={handleLogValue} style={{ padding: '10px 15px', background: '#009688', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}>
உள்ளீட்டு மதிப்பைப் பதிவுசெய்
</button>
<p><em>புதிய திட்டங்களுக்கு, ஃபங்ஷனல் காம்பொனென்ட்களில் refs-க்கு `useRef` இயல்பான தேர்வாகும்.</em></p>
</div>
);
}

ஒரு பெற்றோர் காம்பொனென்ட் ஒரு ஃபங்ஷனல் குழந்தை காம்பொனென்ட்டிற்குள் உள்ள ஒரு DOM உறுப்பிற்கு ஒரு ref-ஐப் பெற வேண்டும் என்றால், React.forwardRef உங்கள் தீர்வாகும். இது ஒரு உயர்-வரிசை காம்பொனென்ட் ஆகும், இது ஒரு பெற்றோரிடமிருந்து அதன் குழந்தைகளின் DOM உறுப்புகளில் ஒன்றிற்கு ஒரு ref-ஐ "முன்னோக்கி அனுப்ப" உங்களை அனுமதிக்கிறது, ஃபங்ஷனல் காம்பொனென்ட்டின் உள்ளடக்கத்தை பராமரிக்கும் அதே நேரத்தில் தேவைப்படும்போது கட்டாய அணுகலை செயல்படுத்துகிறது.

import React, { useRef, useEffect } from 'react';

// அதன் சொந்த உள்ளீட்டு உறுப்பிற்கு ஒரு ref-ஐ வெளிப்படையாக முன்னோக்கி அனுப்பும் ஃபங்ஷனல் காம்பொனென்ட்
const ForwardedInput = React.forwardRef((props, ref) => (
<input type="text" ref={ref} className="forwarded-input" placeholder={props.placeholder} style={{ padding: '10px', margin: '8px 0', border: '1px solid #ccc', borderRadius: '4px', width: '100%' }} />
));

class ParentComponentUsingForwardRef extends React.Component {
constructor(props) {
super(props);
this.parentInputRef = React.createRef();
}

componentDidMount() {
if (this.parentInputRef.current) {
this.parentInputRef.current.focus();
console.log('ஃபங்ஷனல் காம்பொனென்ட்டிற்குள் உள்ள உள்ளீடு பெற்றோரிடமிருந்து (கிளாஸ் காம்பொனென்ட்) அனுப்பப்பட்ட ref வழியாக ஃபோகஸ் செய்யப்பட்டது!');
}
}

render() {
return (
<div style={{ margin: '20px', padding: '20px', border: '1px solid #6f42c1', borderRadius: '8px', background: '#f5eef9' }}>
<h3>createRef உடன் Ref முன்னோக்கி அனுப்பும் எடுத்துக்காட்டு (பெற்றோர் கிளாஸ் காம்பொனென்ட்)</h3>
<label>விவரங்களை உள்ளிடவும்:</label>
<ForwardedInput ref={this.parentInputRef} placeholder="இந்த உள்ளீடு ஒரு ஃபங்ஷனல் காம்பொனென்ட்டிற்குள் உள்ளது" />
<p><em>நேரடி DOM அணுகலை வெளிப்படுத்த வேண்டிய மீண்டும் பயன்படுத்தக்கூடிய காம்பொனென்ட் நூலகங்களை உருவாக்குவதற்கு இந்த முறை முக்கியமானது.</em></p>
</div>
);
}
}

createRef-ஐப் பயன்படுத்தும் ஒரு கிளாஸ் காம்பொனென்ட் forwardRef-ஐப் பயன்படுத்தி ஒரு ஃபங்ஷனல் காம்பொனென்ட்டிற்குள் உள்ள ஒரு DOM உறுப்புடன் எவ்வாறு திறம்பட ஊடாட முடியும் என்பதை இது நிரூபிக்கிறது. இது ஃபங்ஷனல் காம்பொனென்ட்களை தேவைப்படும்போது கட்டாய ஊடாட்டங்களில் சமமாகப் பங்கேற்கச் செய்கிறது, நவீன ரியாக்ட் குறியீட்டுத் தளங்கள் refs-லிருந்து பயனடைய முடியும் என்பதை உறுதி செய்கிறது.

4. Refs-ஐ எப்போது பயன்படுத்தக்கூடாது: ரியாக்ட்டின் ஒருமைப்பாட்டைப் பராமரித்தல்

• குழந்தை காம்பொனென்ட் ஸ்டேட்டைக் கட்டுப்படுத்த: ஒரு குழந்தை காம்பொனென்ட்டின் ஸ்டேட்டை நேரடியாகப் படிக்க அல்லது புதுப்பிக்க ஒரு ref-ஐ ஒருபோதும் பயன்படுத்த வேண்டாம். இது ரியாக்ட்டின் ஸ்டேட் நிர்வாகத்தை மீறுகிறது, உங்கள் பயன்பாட்டை கணிக்க முடியாததாக ஆக்குகிறது. அதற்கு பதிலாக, ஸ்டேட்டை ப்ராப்ஸாக கீழே அனுப்பவும், மற்றும் குழந்தைகள் பெற்றோரிடமிருந்து ஸ்டேட் மாற்றங்களைக் கோர அனுமதிக்க கால்பேக்குகளைப் பயன்படுத்தவும்.
• ப்ராப்ஸிற்கு மாற்றாக: ஒரு ref வழியாக ஒரு குழந்தை கிளாஸ் காம்பொனென்ட்டில் முறைகளை நீங்கள் அழைக்க முடியும் என்றாலும், ஒரு நிகழ்வு கையாளுபவரை குழந்தைக்கு ஒரு ப்ராப்பாக அனுப்புவது அதே குறிக்கோளை ஒரு மேலும் "ரியாக்ட்-இயல்பான" வழியில் அடையுமா என்று கருதுங்கள். ப்ராப்ஸ் தெளிவான தரவு ஓட்டத்தை ஊக்குவிக்கின்றன மற்றும் காம்பொனென்ட் ஊடாட்டங்களை வெளிப்படையானதாக ஆக்குகின்றன.
• ரியாக்ட் கையாளக்கூடிய எளிய DOM கையாளுதல்களுக்கு: ஸ்டேட்டின் அடிப்படையில் ஒரு உறுப்பின் டெக்ஸ்ட், ஸ்டைல், அல்லது ஒரு கிளாஸை சேர்க்க/நீக்க விரும்பினால், அதை அறிவிப்பு முறையில் செய்யுங்கள். உதாரணமாக, ஒரு active கிளாஸை மாற்ற, அதை JSX-ல் நிபந்தனையுடன் பயன்படுத்துங்கள்: <div className={isActive ? 'active' : ''}>, divRef.current.classList.add('active')-க்கு பதிலாக.

5. செயல்திறன் பரிசீலனைகள் மற்றும் உலகளாவிய வரம்பு

createRef தானே செயல்திறன் மிக்கது என்றாலும், current-ஐப் பயன்படுத்தி செய்யப்படும் செயல்பாடுகள் குறிப்பிடத்தக்க செயல்திறன் தாக்கங்களைக் கொண்டிருக்கலாம். குறைந்த-நிலை சாதனங்கள் அல்லது மெதுவான நெட்வொர்க் இணைப்புகளில் உள்ள பயனர்களுக்கு (உலகின் பல பகுதிகளில் பொதுவானது), திறனற்ற DOM கையாளுதல்கள் ஜாங்க், பதிலளிக்காத UI-கள், மற்றும் ஒரு மோசமான பயனர் அனுபவத்திற்கு வழிவகுக்கும். அனிமேஷன்கள், சிக்கலான தளவமைப்பு கணக்கீடுகள், அல்லது கனமான மூன்றாம் தரப்பு நூலகங்களை ஒருங்கிணைத்தல் போன்ற பணிகளுக்கு refs-ஐப் பயன்படுத்தும்போது:

• நிகழ்வுகளை Debounce/Throttle செய்யவும்: window.resize அல்லது scroll நிகழ்வுகளில் பரிமாணங்களை அளவிட refs-ஐப் பயன்படுத்தினால், இந்த கையாளுபவர்கள் அதிகப்படியான செயல்பாட்டு அழைப்புகள் மற்றும் DOM வாசிப்புகளைத் தடுக்க debounced அல்லது throttled செய்யப்பட்டுள்ளதா என்பதை உறுதி செய்யவும்.
• DOM வாசிப்புகள்/எழுதுதல்களை தொகுக்கவும்: DOM வாசிப்பு செயல்பாடுகளை (எ.கா., getBoundingClientRect()) DOM எழுத்து செயல்பாடுகளுடன் (எ.கா., ஸ்டைல்களை அமைத்தல்) கலப்பதைத் தவிர்க்கவும். இது தளவமைப்புத் தடுமாற்றத்தைத் தூண்டலாம். fastdom போன்ற கருவிகள் இதைத் திறமையாக நிர்வகிக்க உதவும்.
• முக்கியமற்ற செயல்பாடுகளை ஒத்திவைக்கவும்: அனிமேஷன்களுக்கு requestAnimationFrame-ஐயும், குறைவான முக்கியமான DOM கையாளுதல்களுக்கு setTimeout(..., 0) அல்லது requestIdleCallback-ஐயும் பயன்படுத்தவும், அவை பிரதான நூலைத் தடுக்காமல் மற்றும் பதிலளிக்கக்கூடிய தன்மையைப் பாதிக்காமல் இருப்பதை உறுதி செய்ய.
• புத்திசாலித்தனமாகத் தேர்ந்தெடுக்கவும்: சில நேரங்களில், ஒரு மூன்றாம் தரப்பு நூலகத்தின் செயல்திறன் ஒரு இடையூறாக இருக்கலாம். மாற்றுகளை மதிப்பீடு செய்யுங்கள் அல்லது மெதுவான இணைப்புகளில் உள்ள பயனர்களுக்கு அத்தகைய காம்பொனென்ட்களை சோம்பேறி-ஏற்றுவதைக் கருத்தில் கொள்ளுங்கள், உலகளவில் ஒரு அடிப்படை அனுபவம் செயல்திறன் மிக்கதாக இருப்பதை உறுதி செய்ய.

`createRef` vs. கால்பேக் Refs vs. `useRef`: ஒரு விரிவான ஒப்பீடு

ரியாக்ட் அதன் பரிணாம வளர்ச்சி முழுவதும் refs-ஐக் கையாள வெவ்வேறு வழிகளை வழங்கியுள்ளது. ஒவ்வொன்றின் நுணுக்கங்களையும் புரிந்துகொள்வது உங்கள் குறிப்பிட்ட சூழலுக்கு மிகவும் பொருத்தமான முறையைத் தேர்ந்தெடுப்பதில் முக்கியமானது.

1. `React.createRef()` (கிளாஸ் காம்பொனென்ட்கள் - நவீன)

• வழிமுறை: காம்பொனென்ட் நிகழ்வின் கன்ஸ்ட்ரக்டரில் ஒரு ref ஆப்ஜெக்ட்டை ({ current: null }) உருவாக்குகிறது. ரியாக்ட் DOM உறுப்பு அல்லது காம்பொனென்ட் நிகழ்வை மவுண்டிங்கிற்குப் பிறகு .current பண்பிற்கு ஒதுக்குகிறது.
• முதன்மை பயன்பாடு: பிரத்தியேகமாக கிளாஸ் காம்பொனென்ட்களுக்குள். இது ஒரு காம்பொனென்ட் நிகழ்வுக்கு ஒருமுறை துவக்கப்படுகிறது.
• Ref நிரப்புதல்: .current காம்பொனென்ட் மவுண்ட் ஆன பிறகு உறுப்பு/நிகழ்வுக்கு அமைக்கப்பட்டு, அன்மவுண்ட் செய்யும்போது null-க்கு மீட்டமைக்கப்படுகிறது.
• சிறந்தது: கிளாஸ் காம்பொனென்ட்களில் ஒரு DOM உறுப்பு அல்லது ஒரு குழந்தை கிளாஸ் காம்பொனென்ட் நிகழ்வைக் குறிப்பிட வேண்டிய அனைத்து நிலையான ref தேவைகளுக்கும்.
• நன்மைகள்: தெளிவான, நேரடியான பொருள்-சார்ந்த தொடரியல். இன்லைன் செயல்பாடு மறு-உருவாக்கம் கூடுதல் அழைப்புகளை ஏற்படுத்துவது பற்றிய கவலைகள் இல்லை (கால்பேக் refs உடன் நடக்கக்கூடியது போல).
• தீமைகள்: ஃபங்ஷனல் காம்பொனென்ட்களுடன் பயன்படுத்த முடியாது. கன்ஸ்ட்ரக்டரில் துவக்கப்படாவிட்டால் (எ.கா., ரெண்டரில்), ஒவ்வொரு ரெண்டரிலும் ஒரு புதிய ref ஆப்ஜெக்ட் உருவாக்கப்படலாம், இது சாத்தியமான செயல்திறன் சிக்கல்கள் அல்லது தவறான ref மதிப்புகளுக்கு வழிவகுக்கும். ஒரு நிகழ்வு பண்பிற்கு ஒதுக்க நினைவில் கொள்ள வேண்டும்.

2. கால்பேக் Refs (கிளாஸ் & ஃபங்ஷனல் காம்பொனென்ட்கள் - நெகிழ்வான/மரபு)

• வழிமுறை: நீங்கள் ref ப்ராப்பிற்கு நேரடியாக ஒரு செயல்பாட்டை அனுப்புகிறீர்கள். ரியாக்ட் இந்த செயல்பாட்டை மவுண்ட் செய்யப்பட்ட DOM உறுப்பு அல்லது காம்பொனென்ட் நிகழ்வுடன் அழைக்கிறது, பின்னர் அது அன்மவுண்ட் செய்யப்படும்போது null-உடன் அழைக்கிறது.
• முதன்மை பயன்பாடு: கிளாஸ் மற்றும் ஃபங்ஷனல் காம்பொனென்ட்கள் இரண்டிலும் பயன்படுத்தலாம். கிளாஸ் காம்பொனென்ட்களில், கால்பேக் பொதுவாக this-க்கு பிணைக்கப்பட்டுள்ளது அல்லது ஒரு அம்பு செயல்பாட்டு கிளாஸ் பண்பாக வரையறுக்கப்படுகிறது. ஃபங்ஷனல் காம்பொனென்ட்களில், இது பெரும்பாலும் இன்லைனில் வரையறுக்கப்படுகிறது அல்லது நினைவூட்டப்படுகிறது.
• Ref நிரப்புதல்: கால்பேக் செயல்பாடு ரியாக்ட்டால் நேரடியாக அழைக்கப்படுகிறது. ரெஃபரன்ஸைச் சேமிப்பதற்கு நீங்கள் பொறுப்பு (எ.கா., this.myInput = element;).
• சிறந்தது: refs எப்போது அமைக்கப்பட்டு நீக்கப்படுகின்றன என்பதில் மேலும் நுணுக்கமான கட்டுப்பாடு தேவைப்படும் சூழ்நிலைகளுக்கு, அல்லது மாறும் ref பட்டியல்கள் போன்ற மேம்பட்ட வடிவங்களுக்கு. இது createRef மற்றும் useRef-க்கு முன்பு refs-ஐ நிர்வகிப்பதற்கான முதன்மை வழியாக இருந்தது.
• நன்மைகள்: அதிகபட்ச நெகிழ்வுத்தன்மையை வழங்குகிறது. ref கிடைக்கும்போது (கால்பேக் செயல்பாட்டிற்குள்) உடனடி அணுகலை வழங்குகிறது. உறுப்புகளின் மாறும் சேகரிப்புகளுக்கு refs-ஐ ஒரு வரிசை அல்லது வரைபடத்தில் சேமிக்கப் பயன்படுத்தலாம்.
• தீமைகள்: கால்பேக் render முறைக்குள் இன்லைனில் வரையறுக்கப்பட்டால் (எ.கா., ref={el => this.myRef = el}), இது புதுப்பிப்புகளின் போது இரண்டு முறை அழைக்கப்படும் (ஒருமுறை null-உடன், பின்னர் உறுப்புடன்), இது கவனமாகக் கையாளப்படாவிட்டால் செயல்திறன் சிக்கல்கள் அல்லது எதிர்பாராத பக்க விளைவுகளை ஏற்படுத்தக்கூடும் (எ.கா., கால்பேக்கை ஒரு கிளாஸ் முறையாக உருவாக்குவதன் மூலம் அல்லது ஃபங்ஷனல் காம்பொனென்ட்களில் useCallback-ஐப் பயன்படுத்துவதன் மூலம்).

class CallbackRefDetailedExample extends React.Component {
constructor(props) {
super(props);
this.inputElement = null;
}

// இந்த முறை ரியாக்ட்டால் ref-ஐ அமைக்க அழைக்கப்படும்
setInputElementRef = element => {
if (element) {
console.log('Ref உறுப்பு:', element);
}
this.inputElement = element; // உண்மையான DOM உறுப்பை சேமிக்கவும்
};

componentDidMount() {
if (this.inputElement) {
this.inputElement.focus();
}
}

render() {
return (
<div>
<label>கால்பேக் Ref உள்ளீடு:</label>
<input type="text" ref={this.setInputElementRef} />
</div>
);
}
}

3. `useRef` ஹூக் (ஃபங்ஷனல் காம்பொனென்ட்கள் - நவீன)

• வழிமுறை: ஒரு மாற்றக்கூடிய ref ஆப்ஜெக்ட்டை ({ current: initialValue }) வழங்கும் ஒரு ரியாக்ட் ஹூக். திரும்பிய ஆப்ஜெக்ட் ஃபங்ஷனல் காம்பொனென்ட்டின் முழு ஆயுட்காலத்திற்கும் நீடிக்கிறது.
• முதன்மை பயன்பாடு: பிரத்தியேகமாக ஃபங்ஷனல் காம்பொனென்ட்களுக்குள்.
• Ref நிரப்புதல்: createRef-ஐப் போலவே, ரியாக்ட் DOM உறுப்பு அல்லது காம்பொனென்ட் நிகழ்வை (முன்னோக்கி அனுப்பப்பட்டால்) மவுண்டிங்கிற்குப் பிறகு .current பண்பிற்கு ஒதுக்குகிறது மற்றும் அன்மவுண்டில் null-க்கு அமைக்கிறது. .current மதிப்பு கைமுறையாகவும் புதுப்பிக்கப்படலாம்.
• சிறந்தது: ஃபங்ஷனல் காம்பொனென்ட்களில் அனைத்து ref நிர்வாகத்திற்கும். ஒரு மறு-ரெண்டரைத் தூண்டாமல் மறு-ரெண்டர்கள் முழுவதும் நீடிக்க வேண்டிய எந்த மாற்றக்கூடிய மதிப்பையும் வைத்திருக்கவும் பயனுள்ளதாக இருக்கும் (எ.கா., டைமர் ஐடிகள், முந்தைய மதிப்புகள்).
• நன்மைகள்: ஹூக்ஸிற்கு எளிய, இயல்பானது. ref ஆப்ஜெக்ட் மறு-ரெண்டர்கள் முழுவதும் நீடிக்கிறது, மறு-உருவாக்க சிக்கல்களைத் தவிர்க்கிறது. DOM நோட்கள் மட்டுமல்ல, எந்த மாற்றக்கூடிய மதிப்பையும் சேமிக்க முடியும்.
• தீமைகள்: ஃபங்ஷனல் காம்பொனென்ட்களுக்குள் மட்டுமே வேலை செய்கிறது. வாழ்க்கைச் சுழற்சி தொடர்பான ref ஊடாட்டங்களுக்கு (மவுண்டில் ஃபோகஸ் செய்வது போன்றவை) வெளிப்படையான useEffect தேவைப்படுகிறது.

சுருக்கமாக:

• நீங்கள் ஒரு கிளாஸ் காம்பொனென்ட் எழுதுகிறீர்கள் மற்றும் ஒரு ref தேவைப்பட்டால், React.createRef() பரிந்துரைக்கப்பட்ட மற்றும் தெளிவான தேர்வாகும்.
• நீங்கள் ஒரு ஃபங்ஷனல் காம்பொனென்ட் எழுதுகிறீர்கள் மற்றும் ஒரு ref தேவைப்பட்டால், useRef ஹூக் நவீன, இயல்பான தீர்வாகும்.
• கால்பேக் refs இன்னும் செல்லுபடியாகும் ஆனால் பொதுவாக அதிக சொற்களைக் கொண்டவை மற்றும் கவனமாகக் செயல்படுத்தப்படாவிட்டால் நுட்பமான சிக்கல்களுக்கு ஆளாகின்றன. அவை மேம்பட்ட சூழ்நிலைகளுக்கு அல்லது ஹூக்ஸ் கிடைக்காத பழைய குறியீட்டுத் தளங்கள் அல்லது சூழல்களுடன் பணிபுரியும்போது பயனுள்ளதாக இருக்கும்.
• காம்பொனென்ட்கள் வழியாக refs-ஐ அனுப்புவதற்கு (குறிப்பாக ஃபங்ஷனல் ones), React.forwardRef() அவசியம், இது பெரும்பாலும் பெற்றோர் காம்பொனென்ட்டில் createRef அல்லது useRef-உடன் இணைந்து பயன்படுத்தப்படுகிறது.

உலகளாவிய பரிசீலனைகள் மற்றும் Refs உடன் மேம்பட்ட அணுகல்தன்மை

பெரும்பாலும் ஒரு தொழில்நுட்ப வெற்றிடத்தில் விவாதிக்கப்பட்டாலும், ஒரு உலகளாவிய-மனப்பான்மையுள்ள பயன்பாட்டு சூழலில் refs-இன் பயன்பாடு முக்கியமான தாக்கங்களைக் கொண்டுள்ளது, குறிப்பாக பல்வேறு பயனர்களுக்கான செயல்திறன் மற்றும் அணுகல்தன்மை தொடர்பாக.

1. பல்வேறு சாதனங்கள் மற்றும் நெட்வொர்க்குகளுக்கான செயல்திறன் மேம்படுத்தல்

createRef-இன் பண்டில் அளவு மீதான தாக்கம் மிகக் குறைவு, ஏனெனில் இது ரியாக்ட் கோரின் ஒரு சிறிய பகுதியாகும். இருப்பினும், current பண்புடன் நீங்கள் செய்யும் செயல்பாடுகள் குறிப்பிடத்தக்க செயல்திறன் தாக்கங்களைக் கொண்டிருக்கலாம். குறைந்த-நிலை சாதனங்கள் அல்லது மெதுவான நெட்வொர்க் இணைப்புகளில் உள்ள பயனர்களுக்கு (உலகின் பல பகுதிகளில் பொதுவானது), திறனற்ற DOM கையாளுதல்கள் ஜாங்க், பதிலளிக்காத UI-கள், மற்றும் ஒரு மோசமான பயனர் அனுபவத்திற்கு வழிவகுக்கும். அனிமேஷன்கள், சிக்கலான தளவமைப்பு கணக்கீடுகள், அல்லது கனமான மூன்றாம் தரப்பு நூலகங்களை ஒருங்கிணைத்தல் போன்ற பணிகளுக்கு refs-ஐப் பயன்படுத்தும்போது:

• நிகழ்வுகளை Debounce/Throttle செய்யவும்: window.resize அல்லது scroll நிகழ்வுகளில் பரிமாணங்களை அளவிட refs-ஐப் பயன்படுத்தினால், இந்த கையாளுபவர்கள் அதிகப்படியான செயல்பாட்டு அழைப்புகள் மற்றும் DOM வாசிப்புகளைத் தடுக்க debounced அல்லது throttled செய்யப்பட்டுள்ளதா என்பதை உறுதி செய்யவும்.
• DOM வாசிப்புகள்/எழுதுதல்களை தொகுக்கவும்: DOM வாசிப்பு செயல்பாடுகளை (எ.கா., getBoundingClientRect()) DOM எழுத்து செயல்பாடுகளுடன் (எ.கா., ஸ்டைல்களை அமைத்தல்) கலப்பதைத் தவிர்க்கவும். இது தளவமைப்புத் தடுமாற்றத்தைத் தூண்டலாம். fastdom போன்ற கருவிகள் இதைத் திறமையாக நிர்வகிக்க உதவும்.
• முக்கியமற்ற செயல்பாடுகளை ஒத்திவைக்கவும்: அனிமேஷன்களுக்கு requestAnimationFrame-ஐயும், குறைவான முக்கியமான DOM கையாளுதல்களுக்கு setTimeout(..., 0) அல்லது requestIdleCallback-ஐயும் பயன்படுத்தவும், அவை பிரதான நூலைத் தடுக்காமல் மற்றும் பதிலளிக்கக்கூடிய தன்மையைப் பாதிக்காமல் இருப்பதை உறுதி செய்ய.
• புத்திசாலித்தனமாகத் தேர்ந்தெடுக்கவும்: சில நேரங்களில், ஒரு மூன்றாம் தரப்பு நூலகத்தின் செயல்திறன் ஒரு இடையூறாக இருக்கலாம். மாற்றுகளை மதிப்பீடு செய்யுங்கள் அல்லது மெதுவான இணைப்புகளில் உள்ள பயனர்களுக்கு அத்தகைய காம்பொனென்ட்களை சோம்பேறி-ஏற்றுவதைக் கருத்தில் கொள்ளுங்கள், உலகளவில் ஒரு அடிப்படை அனுபவம் செயல்திறன் மிக்கதாக இருப்பதை உறுதி செய்ய.

2. அணுகல்தன்மையை மேம்படுத்துதல் (ARIA பண்புகள் மற்றும் கீபோர்டு வழிசெலுத்தல்)

Refs மிகவும் அணுகக்கூடிய வலைப் பயன்பாடுகளை உருவாக்குவதில் கருவியாக உள்ளன, குறிப்பாக சொந்த பிரவுசர் சமமானவை இல்லாத தனிப்பயன் UI காம்பொனென்ட்களை உருவாக்கும்போது அல்லது இயல்புநிலை நடத்தைகளை மீறும்போது. ஒரு உலகளாவிய பார்வையாளர்களுக்கு, வலை உள்ளடக்க அணுகல்தன்மை வழிகாட்டுதல்களை (WCAG) பின்பற்றுவது ஒரு நல்ல நடைமுறை மட்டுமல்ல, பெரும்பாலும் ஒரு சட்டத் தேவையாகும். Refs செயல்படுத்துகின்றன:

• நிரலாக்க ஃபோகஸ் மேலாண்மை: உள்ளீட்டு புலங்களுடன் பார்த்தது போல, refs உங்களை ஃபோகஸை அமைக்க அனுமதிக்கிறது, இது கீபோர்டு பயனர்கள் மற்றும் ஸ்கிரீன் ரீடர் வழிசெலுத்தலுக்கு முக்கியமானது. இது மோடல்கள், டிராப்டவுன் மெனுக்கள், அல்லது ஊடாடும் விட்ஜெட்களுக்குள் ஃபோகஸை நிர்வகிப்பதை உள்ளடக்கியது.
• டைனமிக் ARIA பண்புகள்: DOM உறுப்புகளில் ARIA (Accessible Rich Internet Applications) பண்புகளை (எ.கா., aria-expanded, aria-controls, aria-live) மாறும் வகையில் சேர்க்க அல்லது புதுப்பிக்க refs-ஐப் பயன்படுத்தலாம். இது காட்சி UI-லிருந்து மட்டும் ஊகிக்க முடியாத சொற்பொருள் தகவலை உதவித் தொழில்நுட்பங்களுக்கு வழங்குகிறது.

  class CollapsibleSection extends React.Component {
  constructor(props) {
  super(props);
  this.buttonRef = React.createRef();
  this.state = { isExpanded: false };
  }
  
  toggleExpanded = () => {
  this.setState(prevState => ({ isExpanded: !prevState.isExpanded }), () => {
  if (this.buttonRef.current) {
  // ஸ்டேட்டின் அடிப்படையில் ARIA பண்பை மாறும் வகையில் புதுப்பிக்கவும்
  this.buttonRef.current.setAttribute('aria-expanded', this.state.isExpanded);
  }
  });
  };
  
  componentDidMount() {
  if (this.buttonRef.current) {
  this.buttonRef.current.setAttribute('aria-controls', `section-${this.props.id}`);
  this.buttonRef.current.setAttribute('aria-expanded', this.state.isExpanded);
  }
  }
  
  render() {
  const { id, title, children } = this.props;
  const { isExpanded } = this.state;
  return (
  <div style={{ margin: '20px auto', maxWidth: '600px', border: '1px solid #0056b3', borderRadius: '8px', background: '#e7f0fa', overflow: 'hidden' }}>
  <h4>
  <button
  ref={this.buttonRef} // ARIA பண்புகளுக்கு பட்டனுக்கான Ref
  onClick={this.toggleExpanded}
  style={{ background: 'none', border: 'none', padding: '15px 20px', width: '100%', textAlign: 'left', cursor: 'pointer', fontSize: '1.2em', color: '#0056b3', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
  id={`section-header-${id}`}
  >
  {title} <span>▼</span>
  </button>
  </h4>
  {isExpanded && (
  <div id={`section-${id}`} role="region" aria-labelledby={`section-header-${id}`} style={{ padding: '0 20px 20px', borderTop: '1px solid #a7d9f7' }}>
  {children}
  </div>
  )}
  </div>
  );
  }
  }

• கீபோர்டு ஊடாட்டக் கட்டுப்பாடு: தனிப்பயன் டிராப்டவுன்கள், ஸ்லைடர்கள், அல்லது பிற ஊடாடும் உறுப்புகளுக்கு, நீங்கள் குறிப்பிட்ட கீபோர்டு நிகழ்வு கையாளுபவர்களைச் செயல்படுத்த வேண்டியிருக்கலாம் (எ.கா., ஒரு பட்டியலில் வழிசெலுத்தலுக்கு அம்பு விசைகள்). Refs இந்த நிகழ்வு கேட்பான்களை இணைக்க மற்றும் நிர்வகிக்கக்கூடிய இலக்கு DOM உறுப்பிற்கான அணுகலை வழங்குகின்றன.

refs-ஐ சிந்தனையுடன் பயன்படுத்துவதன் மூலம், டெவலப்பர்கள் தங்கள் பயன்பாடுகள் உலகெங்கிலும் உள்ள குறைபாடுகள் உள்ளவர்களுக்குப் பயன்படுத்தக்கூடியதாகவும் உள்ளடக்கியதாகவும் இருப்பதை உறுதிசெய்ய முடியும், இது அவர்களின் உலகளாவிய வரம்பு மற்றும் தாக்கத்தை பெரிதும் விரிவுபடுத்துகிறது.

3. சர்வதேசமயமாக்கல் (I18n) மற்றும் உள்ளூர்மயமாக்கப்பட்ட ஊடாட்டங்கள்

சர்வதேசமயமாக்கலுடன் (i18n) பணிபுரியும்போது, refs ஒரு நுட்பமான ஆனால் முக்கியமான பங்கை வகிக்க முடியும். உதாரணமாக, வலமிருந்து-இடம் (RTL) ஸ்கிரிப்டைப் பயன்படுத்தும் மொழிகளில் (அரபு, ஹீப்ரு, அல்லது பாரசீகம் போன்றவை), இயல்பான டேப் வரிசை மற்றும் ஸ்க்ரோல் திசை இடமிருந்து-வலம் (LTR) மொழிகளிலிருந்து வேறுபடலாம். நீங்கள் refs-ஐப் பயன்படுத்தி நிரலாக்க முறையில் ஃபோகஸ் அல்லது ஸ்க்ரோலிங்கை நிர்வகிக்கிறீர்கள் என்றால், உங்கள் தர்க்கம் ஆவணத்தின் அல்லது உறுப்பின் டெக்ஸ்ட் திசையை (dir பண்பு) மதிப்பதை உறுதி செய்வது முக்கியம்.

• RTL-அறிந்த ஃபோகஸ் மேலாண்மை: பிரவுசர்கள் பொதுவாக RTL-க்கான இயல்புநிலை டேப் வரிசையை சரியாகக் கையாளும் அதே வேளையில், நீங்கள் தனிப்பயன் ஃபோகஸ் பொறிகள் அல்லது தொடர்ச்சியான ஃபோகஸிங்கைச் செயல்படுத்தினால், ஒரு சீரான மற்றும் உள்ளுணர்வு அனுபவத்தை உறுதி செய்ய RTL சூழல்களில் உங்கள் ref-அடிப்படையிலான தர்க்கத்தை முழுமையாகச் சோதிக்கவும்.
• RTL-ல் தளவமைப்பு அளவீடு: ஒரு ref வழியாக getBoundingClientRect()-ஐப் பயன்படுத்தும்போது, left மற்றும் right பண்புகள் வியூபோர்ட்டைப் பொறுத்தவை என்பதை அறிந்து கொள்ளுங்கள். காட்சி தொடக்கம்/முடிவைப் பொறுத்திருக்கும் தளவமைப்பு கணக்கீடுகளுக்கு, RTL தளவமைப்புகளுக்கு உங்கள் தர்க்கத்தைச் சரிசெய்ய document.dir அல்லது உறுப்பின் கணக்கிடப்பட்ட ஸ்டைலைக் கருத்தில் கொள்ளுங்கள்.
• மூன்றாம் தரப்பு நூலக ஒருங்கிணைப்பு: refs வழியாக ஒருங்கிணைக்கப்பட்ட எந்த மூன்றாம் தரப்பு நூலகங்களும் (எ.கா., விளக்கப்பட நூலகங்கள்) தாங்களே i18n-அறிந்தவை என்பதையும், உங்கள் பயன்பாடு அவற்றை ஆதரித்தால் RTL தளவமைப்புகளைச் சரியாகக் கையாளுகின்றன என்பதையும் உறுதி செய்யவும். இதை உறுதி செய்வதற்கான பொறுப்பு பெரும்பாலும் நூலகத்தை ஒரு ரியாக்ட் காம்பொனென்ட்டில் ஒருங்கிணைக்கும் டெவலப்பரின் மீது விழுகிறது.

முடிவு: உலகளாவிய பயன்பாடுகளுக்கு `createRef` உடன் கட்டளைக் கட்டுப்பாட்டில் தேர்ச்சி பெறுதல்

React.createRef() என்பது ரியாக்ட்டில் ஒரு "தப்பிக்கும் வழி" என்பதை விட மேலானது; இது ரியாக்ட்டின் சக்திவாய்ந்த அறிவிப்பு முன்னுதாரணத்திற்கும் பிரவுசர் DOM ஊடாட்டங்களின் கட்டாய யதார்த்தங்களுக்கும் இடையிலான இடைவெளியைக் குறைக்கும் ஒரு முக்கிய கருவியாகும். புதிய ஃபங்ஷனல் காம்பொனென்ட்களில் அதன் பங்கு பெரும்பாலும் useRef ஹூக்கால் எடுத்துக் கொள்ளப்பட்டாலும், createRef கிளாஸ் காம்பொனென்ட்களுக்குள் refs-ஐ நிர்வகிப்பதற்கான நிலையான மற்றும் மிகவும் இயல்பான வழியாக உள்ளது, இது இன்னும் உலகெங்கிலும் உள்ள பல நிறுவன பயன்பாடுகளின் கணிசமான பகுதியாகும்.

அதன் உருவாக்கம், இணைப்பு, மற்றும் .current பண்பின் முக்கியமான பங்கை முழுமையாகப் புரிந்துகொள்வதன் மூலம், டெவலப்பர்கள் நிரலாக்க ஃபோகஸ் மேலாண்மை, நேரடி மீடியா கட்டுப்பாடு, பல்வேறு மூன்றாம் தரப்பு நூலகங்களுடன் (D3.js விளக்கப்படங்கள் முதல் தனிப்பயன் ரிச் டெக்ஸ்ட் எடிட்டர்கள் வரை) தடையற்ற ஒருங்கிணைப்பு, மற்றும் துல்லியமான உறுப்பு பரிமாண அளவீடு போன்ற சவால்களை நம்பிக்கையுடன் சமாளிக்க முடியும். இந்த திறன்கள் தொழில்நுட்ப சாதனைகள் மட்டுமல்ல; உலகளாவிய பயனர்கள், சாதனங்கள், மற்றும் கலாச்சார சூழல்களின் பரந்த ஸ்பெக்ட்ரம் முழுவதும் செயல்திறன் மிக்க, அணுகக்கூடிய, மற்றும் பயனர்-நட்பு பயன்பாடுகளை உருவாக்குவதற்கு அவை அடிப்படையானவை.

இந்த சக்தியை நியாயமாகப் பயன்படுத்த நினைவில் கொள்ளுங்கள். எப்போதும் ரியாக்ட்டின் அறிவிப்பு ஸ்டேட் மற்றும் ப்ராப் அமைப்பிற்கு முதலில் சாதகமாக இருங்கள். கட்டாயக் கட்டுப்பாடு உண்மையாகத் தேவைப்படும்போது, createRef (கிளாஸ் காம்பொனென்ட்களுக்கு) அல்லது useRef (ஃபங்ஷனல் காம்பொனென்ட்களுக்கு) அதை அடைய ஒரு வலுவான மற்றும் நன்கு வரையறுக்கப்பட்ட வழிமுறையை வழங்குகிறது. refs-ல் தேர்ச்சி பெறுவது நவீன வலை உருவாக்கத்தின் விளிம்பு வழக்குகள் மற்றும் நுணுக்கங்களைக் கையாள உங்களுக்கு அதிகாரம் அளிக்கிறது, உங்கள் ரியாக்ட் பயன்பாடுகள் உலகின் எந்த இடத்திலும் விதிவிலக்கான பயனர் அனுபவங்களை வழங்க முடியும் என்பதை உறுதி செய்கிறது, அதே நேரத்தில் ரியாக்ட்டின் நேர்த்தியான காம்பொனென்ட்-அடிப்படையிலான கட்டமைப்பின் முக்கிய நன்மைகளைப் பராமரிக்கிறது.

மேலும் கற்றல் மற்றும் ஆய்வு

• ரியாக்ட் அதிகாரப்பூர்வ ஆவணம் Refs-இல்: மூலத்திலிருந்து நேரடியாக மிகவும் புதுப்பித்த தகவல்களுக்கு, <em>https://react.dev/learn/manipulating-the-dom-with-refs</em>-ஐப் பார்க்கவும்
• ரியாக்ட்டின் `useRef` ஹூக்கைப் புரிந்துகொள்ளுதல்: ஃபங்ஷனல் காம்பொனென்ட் சமமானதை ஆழமாக ஆராய, <em>https://react.dev/reference/react/useRef</em>-ஐ ஆராயுங்கள்
• `forwardRef` உடன் Ref முன்னோக்கி அனுப்புதல்: காம்பொனென்ட்கள் வழியாக refs-ஐ திறம்பட அனுப்புவது எப்படி என்பதை அறிய: <em>https://react.dev/reference/react/forwardRef</em>
• வலை உள்ளடக்க அணுகல்தன்மை வழிகாட்டுதல்கள் (WCAG): உலகளாவிய வலை உருவாக்கத்திற்கு அவசியம்: <em>https://www.w3.org/WAI/WCAG22/quickref/</em>
• ரியாக்ட் செயல்திறன் மேம்படுத்தல்: உயர்-செயல்திறன் பயன்பாடுகளுக்கான சிறந்த நடைமுறைகள்: <em>https://react.dev/learn/optimizing-performance</em>